JavaScript - Fullscreen Image Roll Over

Hi, I'm having a problem getting one of my image rollovers to work, what confuses me is that the other image works fine, I'm trying to get this to
work for an assignment

here's the javascript:
Code:

rollImage = new Array()
	
	for(i = 0; i < 12; i++){
		
		rollImage[i] = new Image(85,85);
	}
	

 
  rollImage[0].src = "images/narav2.jpg";
  rollImage[1].src = "images/narav3.jpg";
  rollImage[2].src = "images/sasuke-avatar-118.jpg";
  rollImage[3].src = "images/sasuke.jpg";
  
  

  function swapNar(img){       //this works fine
    document.nar11.src = rollImage[img].src;
    return true;
  }

  function returnNar(img){     //this function works fine as well
    document.nar11.src = rollImage[img].src; 
    return true;
  }

  function swapSas(img){                    //this function not working
	document.sasim.src = rollImage(img).src;
    return true;
  }
  
  function returnSas(img){                         //this function also not working
	document.sasim.src = rollImage(img).src;
    return true;
  }

Here's the HTML:

Code:

<tr>
 <td height="60">
 <img src="images/narav2.jpg" name="nar11" width="85" height="85" border="0" id="nar11"/> 
 </td>
    
 <td>
 
 <a href="naruto.html" onMouseover = "swapNar(1)" onMouseout = "returnNar(0)"> Naruto </a>

 </td>
</tr>

<!-- When I mouse over the above link the image rolls over as expected,
      the bottom link doesn't work as expected and I can't see what I'm
      doing wrong -->



<tr>
<td height="60">
<img src="images/sasuke-avatar-118.jpg" name="sasim" width="85" height="85" border="0" id="sasim"/>
</td>

<td>

<a href="sasuke.html" onMouseout= "swapSas(3)" onMouseover= "returnSas(2)"> Sasuke </a>

</td>


</tr>

I can't see what the problem is with the returnSas and swapSas functions,
I'm still a noob at this and would really appreciate some assistance,
thanks in advance

Hello,

First of all, I am not a coder. I can put together some fairly simple HTML, and can borrow chunks of JS code to suit certain basic purposes. Also, I am terribly sorry if my technical lingo is way off target.

I have managed to accomplish two separate goals using javascript, but am having trouble combining their results.

I have created an image link that randomly calls a URL from an array. I also have a separate roll-over image. What I am trying to do is have the link that accesses the array also be a roll-over image. I can't seem to accomplish this.

http://matrix.senecac.on.ca/~mlinhar...low/page7.html

This URL is what I am working on. The "b" symbol is the roll-over. The "right" arrow accesses an array at:

http://matrix.senecac.on.ca/~mlinhar...w/randomize.js

I have tried simply adding my roll-over code to randomize.js and adjusting the array accordingly, but that doesn't seem to work.

I would like the "right" arrow to be a roll-over image as the "b" symbol is, but also access the "randomize" array as it currently does.

My problem is that my understanding of JS isn't great enough to determine how separate pieces of code might be combined or function together.

Anyways, I'm sorry if my technical knowledge and abilities are too underdeveloped for this forum. I would appreciate any and all advice anyone might have.

I need what this...
Code:

       		$('#gatewayDimmer').width($('html').width());
		$('#gatewayDimmer').height($('html').height());
		$('#gatewayDimmer').css('display','block');

...is controlling to occupy the full screen/scrollable window. In FireFox, it does except for maybe...11px thats initially under the vertical scrollbar(when you use the horizontal scrollbar and scroll right, you can see the area under the vertical scrollbar was never occupied). In IE(7 at least), it occupies everything in the initial window, even the area underneath the vertical & horizontal scrollbars, but after scrolling down past the area the horizontal scrollbar would've covered, it doesn't occupy anything(it stops). I need every inch, pixel, etc. covered, from head to toe. To lock it, if you will. Is there something I can add, change here? Thanks in advance

Hi,
well making a page fullscreen is one of my favorite topics but whenever I have thought of doing it, I have always received one answer and that is, it is only done with flash.
For the first time today I saw one that is not done with flash, can someone tell me how exactly it is done, so I could atlast full my dream of using it ^^
here is the image
http://content.screencast.com/users/...04-13_0001.png

and here is the link to the page where this fullscreen button exists.
http://tutorialzine.com/2010/09/html...deshow-jquery/

Hey fellow coders. I've been searching for a script, but I'm coming up empty. The script will display products in a single row full screen left to right. To slide the products there is a pull bar. You can see how the exact script works on http://www.logitech.com/en-us/keyboards/keyboards. Does anybody know of a complete script, or at least one that is close enough to alter. Thanks much.

Found this random background img code that works great:



Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	<script  type="text/javascript">
		function changeImg(imgNumber)	{
			var myImages = ["images/image0.jpg", "images/image1.jpg", "images/image2.jpg", "images/image3.jpg"]; 
			var imgShown = document.body.style.backgroundImage;
			var newImgNumber =Math.floor(Math.random()*myImages.length);
			document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
		}
		window.onload=changeImg;
	</script>
	<style type="text/css">
		.bg {background-attachment:fixed; background-repeat: no-repeat; background-position:0% 0%;}

	</style>
</head>
<body class="bg">
	<p>Some text</p>
	<!-- put a lot text lines here to see that the background stays fixed. -->
	<p>Some text</p>
</body>

The only problem i have is making the background image width and height 100% so that the entire image fills in the screen and fills in on resize of window. Please Help...thanks in advance

This is my first javascript game and it's pretty much built of code I've gathered over
time and cleaned up. Here's a manipulated screenshot of what I'm trying to accomplish.

You're an ant and you want those goodies on the map as quickly as possible!

click this link to view a bigger manipulated screenshot
click this link to view the goodies (items)
The ant is the playable character you control by using the arrow keys.
Every time you load the page, or click "restart game", three new items will
spawn randomly on the level and the time will be reset to 0 seconds.
An arrow key must be pressed to start the time counter and the game itself.
There are only 5 items so far, cheese, apple, banana, candy and donut.
The items are supposed to be collected as quickly as possible, when the last item has been collected
(by simply running over it) the game will end, save the time and display a hi-score list.
Time limit is 30 seconds, the game will display a classic "GAMER OVER" if the limit is overrided.
Problems I'm trying to solve:

1: Fullscreen mode (and make the ant actually STAY on the screen)
I want the game level to adapt itself to the computer screen. The game dimensions are 1000x600px at the moment but the ant does not respect the level dimensions. Screenshot: http://i41.tinypic.com/kc1j81.jpg. I have a feeling about that somekind of percental code has to be implented but I've never done this before. (Please note that the size of the ant and the items will remain as they are)

2: Spawning three items randomly on the level
I drew 5 items and saved them as 100x100 PNG. Three of these items have to spawn at a random location on the fullscreen level. The LAST item collected must trigger the time counter to stop. The time will later be used on the hi-score list where he/she can type her nickname. This information will be uploaded to a database.

3: 30 second time limit
Letting the time counter reach 30 seconds will trigger a "GAME OVER". The only way to try again is page refresh or "restart game".

Code:

<html>
<head>
<style type="text/css">
div#game {
	width:1000px;
	height:600px;
	position:absolute;
	background:#c3c3c3;
}
</style>
<script type='text/javascript'>

// movement vars
var xpos = 100;
var ypos = 100;
var xspeed = 1;
var yspeed =1;
var maxSpeed = 5;

// boundary
var minx = 0;
var miny = 0;
var maxx = 1000; // characters movement field, width
var maxy =600; // characters movement field, height

// controller vars
var upPressed = 0;
var downPressed = 0;
var leftPressed = 0;
var rightPressed = 0;

function slowDownX()
{
  if (xspeed > 0)
    xspeed = xspeed - 1;
  if (xspeed < 0)
    xspeed = xspeed + 1;
}

function slowDownY()
{
  if (yspeed > 0)
    yspeed = yspeed - 1;
  if (yspeed < 0)
    yspeed = yspeed + 1;
}

function gameLoop()
{
  // change position based on speed
  xpos = Math.min(Math.max(xpos + xspeed,minx),maxx);
  ypos = Math.min(Math.max(ypos + yspeed,miny),maxy);

  // or, without boundaries:
  // xpos = xpos + xspeed;
  // ypos = ypos + yspeed;

  // change actual position
  document.getElementById('character').style.left = xpos + "px";
  document.getElementById('character').style.top = ypos + "px";

  // change speed based on keyboard events
  if (upPressed == 1)
    yspeed = Math.max(yspeed - 1,-1*maxSpeed);
  if (downPressed == 1)
    yspeed = Math.min(yspeed + 1,1*maxSpeed)
  if (rightPressed == 1)
    xspeed = Math.min(xspeed + 1,1*maxSpeed);
  if (leftPressed == 1)
    xspeed = Math.max(xspeed - 1,-1*maxSpeed);

  // deceleration
  if (upPressed == 0 && downPressed == 0)
     slowDownY();
  if (leftPressed == 0 && rightPressed == 0)
     slowDownX();

  // loop
  setTimeout("gameLoop()",10);
}

function keyDown(e)
{
  var code = e.keyCode ? e.keyCode : e.which;
  if (code == 38)
    upPressed = 1;
  if (code == 40)
    downPressed = 1;
  if (code == 37)
    leftPressed = 1;
  if (code == 39)
    rightPressed = 1;
}

function keyUp(e)
{
  var code = e.keyCode ? e.keyCode : e.which;
  if (code == 38)
    upPressed = 0;
  if (code == 40)
    downPressed = 0;
  if (code == 37)
    leftPressed = 0;
  if (code == 39)
    rightPressed = 0;
}

</script>
</head>
<body onload="gameLoop()" onkeydown="keyDown(event)" onkeyup="keyUp(event)" bgcolor='gray'>

<!-- level -->
<div id="game"></div>

<!-- ant character -->
<img id='character' src='images/ant.png' style='position:absolute;left:500px;top:500px;height:125px;width:200px;'/>
</body>
</html>

Hello.

I want to display some text in some part of website when user "rolls over" an image. How can I make it possible? Text position must be totally flexible. (not over image)

Hi friends,

Im new with JS.
How to make the roll over effect in JS.
An image, on roll over, the big size of the same image needs to appear.

regards

anoop

Could some one help me with achieving a roll over effect? Not the type where you hover over a link and a image appears and then you move away from the link and it disappears but rather like the ones viewable in the roll over section here @ www.dailyscience.com - that is you hover over a link and text and an image appears but then you move away and it still remains until you hover over another link? I'm a novice to javascript and am still learning so any help would really be appreciated, thanks!
PS I realise there is a connection to the HTML code as this is where the content lies but interlinking this with my desired effect is rather annoying. Once again thanks.

Hi there,

If anyone can help me it would be incredibly appreciated.

I have this JavaScript file below. Currently it roll's over the image fine but the image stays as the hover after the mouse rolls over. Is there a really quick way to add a roll off/ mouse off function so the image rolls back to the underlying image?

Again thank you in advance for any help you can provide for this problem as I'm very new to JavaScript!
Chris

***********
"// JavaScript Document

$(function() {
$('img[data-hover]').hover(function() {
$(this).attr('tmp', $(this).attr('src')).attr('src', $(this).attr('data-hover')).attr('data-hover', $(this).attr('tmp')).removeAttr('tmp');
}).each(function() {
$('<img />').attr('src', $(this).attr('data-hover'));
});;
});
***********

Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options.

I know the code will be straight forward, I can't work it out though.

Thanks whoever can help = )

I want to mouse over a symbol (or coordinate) on an image and have a photograph appear of the real life item. Is there a code that could be used for doing this?

Any help appreciated.

Code:

 var rollnav = [];

   
rollnav[0] = new Image ;
rollnav[0].src ="buttons/button 1 suits.png"; 

rollnav[1] = new Image;
rollnav[1].src = "buttons/button 2 suits.png";

rollnav[2] = new Image;
rollnav[2].src ="buttons/button 1 dresses.png"; 

rollnav[3] = new Image;
rollnav[3].src ="buttons/button 2 dresses.png";  

rollnav[4] = new Image;
rollnav[4].src ="buttons/button 1 christening.png"; 

rollnav[5] = new Image;
rollnav[5].src ="buttons/button 2 christening";  

rollnav[6] = new Image;
rollnav[6].src ="buttons/button 1 Acessories.png"; 

rollnav[7] = new Image;
rollnav[7].src ="buttons/button 2 Acessories.png";  

rollnav[8] = new Image;
rollnav[8].src ="buttons/button 1 home.png"; 

rollnav[9] = new Image;
rollnav[9].src ="buttons/button 2 home.png";  

rollnav[10] = new Image;
rollnav[10].src ="buttons/button 1 contact us.png"; 

rollnav[11] = new Image;
rollnav[11].src ="buttons/button 2 contact us.png";  

rollnav[12] = new Image;
rollnav[12].src ="buttons/button 1 links.png"; 

rollnav[13] = new Image;
rollnav[13].src ="buttons/button 2 links.png";  

function SwapOutsuit(){
    document.suitnav.src = rollnav[1].src;
    return true;
  }

  function SwapBacksuit(){
    document.suitnav.src = rollnav[0].src; 
    return true;
  }
function SwapOutdress(){
    document.dressnav.src = rollnav[3].src;
    return true;
  }

  function SwapBackdress(){
    document.dressnav.src = rollnav[2].src; 
    return true;
  }
  
  function SwapOutchris(){
    document.chrisnav.src = rollnav[5].src;
    return true;
  }

  function SwapBackchris(){
    document.chrisnav.src = rollnav[4].src; 
    return true;
  }
  
    function SwapOutaccess(){
    document.accessnav.src = rollnav[7].src;
    return true;
  }

  function SwapBackaccess(){
    document.accessnav.src = rollnav[6].src; 
    return true;
  }
  
  function SwapOuthome(){
    document.homenav.src = rollnav[9].src;
    return true;
  }

  function SwapBackhome(){
    document.homenav.src = rollnav[8].src; 
    return true;
  }
  
  function SwapOutcus(){
    document.cusnav.src = rollnav[11].src;
    return true;
  }

  function SwapBackcus(){
    document.cusnav.src = rollnav[10].src; 
    return true;
  }
  
  function SwapOutlink(){
    document.linknav.src = rollnav[13].src;
    return true;
  }

  function SwapBacklink(){
    document.linknav.src = rollnav[12].src; 
    return true;
  }

hi im trying to create a series of rollover buttons for my site that can be used on all pages.
im using the above array to switch the button images the problem is they all work up until number 9
then they just display the image set as the original image and dont change on mouse over.
i try declaring an array with more than 9 spaces it doesn't seem to make a difference ive tried the new array format to with no avail.
any help would be greatly appreciated.

i have included my code which is embedded in my html to call the function below.
Code:

 <A href="coolkids formal contact us.html"
  onMouseOver="SwapOutcus()"
  onMouseOut="SwapBackcus()"><img
  src="buttons/button 1 contact us.png" name="cusnav" align="left"
  ></A>
  
  <A href="information.html"
  onMouseOver="SwapOutlink()"
  onMouseOut="SwapBacklink()"><img
  src="buttons/button 1 links.png" name="linknav" align="left"
  ></A>

Hi
I use dreamweaver to build sites, and so don't really have to do much with the code, however adobe cs5 has removed the navigation bar tool and I am totally lost without it.
I know Java script is needed...
Could anyone help? If someone has some code ,for a vertical navigation bar with 8 buttons, 3 images for each button, buttonup mouse over and button down (which is of course a link to another page), that I could copy and edit, it would help alot!