asked on

Change image src dynamically on mouseover

Hi,
I want to create a javascript image swap on mouse over.

I have two directories of images "/images/up/" and "images/down".

So on mousover I need JavaScript code to change the subfolder from "up" to "down" in the src attribute. On mouseout I need it to be changed back.

Is this possible? All scripts I have found so far require me to specify full file name of each image, but I want this script to work on any image dynamically.

Thanks

leakim971

window.onload = function() {

var myimage = document.getElementById("YOUR_IMAGE_ID");

myimage.onmouseover = function() {
       var url = this.url.replace("/images/up/", "/images/down/");
       this.url = url;
}

myimage.onmouseout = function() {
       var url = this.url.replace("/images/down/", "/images/up/");
       this.url = url;
}

}

Open in new window

Kiran Sonawane

Like this

<script language="javascript" type="text/javascript">
        function mouseOverImage() {
            document.getElementById("imgid").src = "/images/up/down.jpg";
        }
 
        function mouseOutImage() {
            document.getElementById("imgid").src = "images/down/up.jpg";
        }
    </script>

Open in new window

Your html code

<img  id= "imgid" alt="image " src="images/down/up.jpg" onmouseover = "mouseOverImage()"  önmouseout="mouseOutImage()"/>

Open in new window

mhdi

ASKER

Hey guys,

Because I have multiple image rollovers I dont think this will work because ID is suppose to be unique.

Is there another way to work with the src attribue?

This is where I am at:

<script>
function ChangeDown() {
	$.attr("src").replace('up', 'down'));
}
function ChangeUp() {
	$(this).attr("src").replace('down', 'up'));
}
</script

Open in new window

<img src="up/button1.jpg" onmouseover="ChangeDown()" onmouseout="ChangeUp()"/>

Open in new window

leakim971

if you've multiple images check this page : http://jsfiddle.net/g32EV/
Hope you've all your image in a container or use a common class for all of them to check inside the loop additionaly

window.onload = function() {

//	var images = document.body.getElementsByTagName("img");
	var images = document.getElementById("container").getElementsByTagName("img");
    for(var i=0;i<images.length;i++) {
        images[i].onmouseover = function() {
               var url = this.url.replace("/images/up/", "/images/down/");
               this.url = url;
        }
        
        images[i].onmouseout = function() {
               var url = this.url.replace("/images/down/", "/images/up/");
               this.url = url;
        }
    }

}

Open in new window

leakim971

using a class to be sure the image have to roll : http://jsfiddle.net/g32EV/1/

window.onload = function() {

//	var images = document.body.getElementsByTagName("img");
	var images = document.getElementById("container").getElementsByTagName("img");
    for(var i=0;i<images.length;i++) {
      if( images[i].className == "rock" ) {
        images[i].onmouseover = function() {
               var url = this.url.replace("/images/up/", "/images/down/");
               this.url = url;
        }
        
        images[i].onmouseout = function() {
               var url = this.url.replace("/images/down/", "/images/up/");
               this.url = url;
        }
      }
    }

}

Open in new window

mhdi

ASKER

Thankyou. I know I am close but this doesnt do anything. What simple mistake have I made?

<html>
<head>
<script>
window.onload = function() {

	var images = document.getElementById("container").getElementsByTagName("img");
    for(var i=0;i<images.length;i++) {
      if( images[i].className == "rock" ) {
        images[i].onmouseover = function() {
               var url = this.url.replace("up/", "down/");
               this.url = url;
        }
        
        images[i].onmouseout = function() {
               var url = this.url.replace("down/", "up/");
               this.url = url;
        }
      }
    }

}
</script>
</head>

<body>
<div id="container">
<table>
  <tr>
    <td><img src="up/home-screen-tiles_10.jpg" width="201" height="238" class="rock" /></td>
    <td><img src="up/home-screen-tiles_11.jpg" width="202" height="238" class="rock" /></td>
    <td><img src="up/home-screen-tiles_12.jpg" width="203" height="238" class="rock" /></td>
    <td><img src="up/home-screen-tiles_13.jpg" width="189" height="238" class="rock" /></td>
  </tr>
  <tr>
    <td><img src="up/home-screen-tiles_18.jpg" width="201" height="236" class="rock" /></td>
    <td><img src="up/home-screen-tiles_19.jpg" width="202" height="236" class="rock" /></td>
    <td><img src="up/home-screen-tiles_20.jpg" width="203" height="236" class="rock" /></td>
    <td><img src="up/home-screen-tiles_21.jpg" width="189" height="236" class="rock" /></td>
  </tr>
</table>
</div>

</body>
</html>

Open in new window

leakim971

this is :

this.src and not this.url, my bad
everywhere you see it replace it by : this.src

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mhdi

ASKER

Thankyou