Solved

Change image src dynamically on mouseover

Posted on 2013-01-17
9
382 Views
Last Modified: 2013-01-17
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
0
Comment
Question by:mhdi
  • 5
  • 3
9 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38790430
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

0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 38790431
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

0
 

Author Comment

by:mhdi
ID: 38790461
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

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 82

Expert Comment

by:leakim971
ID: 38790466
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

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38790476
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

0
 

Author Comment

by:mhdi
ID: 38790494
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

0
 
LVL 82

Expert Comment

by:leakim971
ID: 38790504
this is :

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

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38790507
<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.src.replace("up/", "down/");
               this.src = url;
        }
        
        images[i].onmouseout = function() {
               var url = this.src.replace("down/", "up/");
               this.src = 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

0
 

Author Comment

by:mhdi
ID: 38790514
Thankyou
0

Featured Post

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question