Help needed. Reveal Image when someone mouse over a link using Javascript.

Cheshire · 01-24-2013, 07:46 AM

Greetings!

I'm trying to achieve a mouseover effect similar to the one show on this site.

http://www.javascriptkit.com/script/...ifferent.shtml

However, since I pretty illiterate with java script it became a nightmare to figure out where did I go wrong. I did try to change up the code a tiny bit.

What I'm trying to get is when someone mouse over a link to an exhibition a corresponding image would appear. (the links are arranged in order in which pictures are numbered)

P.S. the images folder (in which images are located) is nested right in the main folder

e.i. Web Page -> images -> "Exhib1.jpg","Exhib2.jpg" ..."

Here is the HTML code I have.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>sloanegalleryofart.com/exhibitions</title>
<script type="text/javascript" src="Exhibitions/mouse_over.js"> </script>
</head>
<link rel="stylesheet" type="text/css" href="exhibitions.css" media="screen" />

<body>


<div class="wrap_overall">
<!-- TOP PART OF THE PAGE -->
    
    <div class="header">
       <img class="logo" src="images/logo_bnr.png" width="244" height="50" alt="Sloane Gallery logo" />
       <div class="content">
       	  <div class="links">
                <ul>
                    <li><a href="index.html"><img alt="" id="nav_home" src="images/button_mainNav_home.png" /></a></li>
                    <li><img alt="current" id="nav_current" src="images/button_mainNav_current.png" /></a></li>
                    <li><a href="artists.html"><img alt="artists" id="nav_artists"  src="images/button_mainNav_artists.png" /></a></li>
                    <li><a href="exhibitions.html"><img alt="exhibitions" id="nav_exhibitions"  src="images/button_mainNav_exhibitions.png" /></a></li>
                    <li><a href="contact.html"><img alt="contact" id="nav_contact"  src="images/button_mainNav_contact.png" /></a></li>
                </ul>
        </div> <!-- End "links" --> 
   	  </div> <!-- End "content"-->
  </div>  <!-- End "header"-->

 <!-- BOTTOM PART OF THE PAGE -->
     <div class="main_box">
     
        
<script>
preloadimages("Exhib1.jpg","Exhib2.jpg","Exhib3.jpg","Exhib4.jpg","Exhib5.jpg")
</script>
      
      <table border="0px" cellpadding="5px" onfocus="MM_showHideLayers('PastIsntDead','','show')">
      
      		
      		
            <tr><td> <h2> Past Exhibitions (2011-2012) </h2> </td></tr>
            <tr><td><a href="#" onMouseover="changeimage(myimages[1],this.href)">Past Isn't Dead. It Isn't Even Past" W. Faulkner Sep 6 - Nov 30, 2012</a></td></tr>
            <tr><td><a href="#" onMouseover="changeimage(myimages[2],this.href)">Genia Chef, Glory of a New Century  May 17 - Jun 14, 2012</a></td></tr>
            <tr><td><a href="#" onMouseover="changeimage(myimages[3],this.href)">Alexander Anufriev: Sublime and Earthly  Nov 17 - Dec 1, 2011</a></td></tr>
            <tr><td><a href="#"> Man’s Best Friends in the Works of Russian Artists  Jun 16 - Jul 7, 2011</a></td></tr>
            <tr><td><a href="#" onMouseover="changeimage(myimages[4],this.href)">In Memory of Tengiz Mirzashvili “Tengiz” (1934 -2008)  Apr 21 - May 5, 2011</a></td></tr>
            <tr><td><a href="#" onMouseover="changeimage(myimages[5],this.href)">Russian Masters: Works on Paper  Dec 16, 2010 - Jan 14, 2011</a></td></tr>
            
      </table>
      
      <div class="picture_block">
      <a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a>
      </div>
      
      
      
    </div> <!-- End of the main box -->  
    
</div> <!--End of wrap_overall-->
</html>

_________________________________________________________________

Here is the Javascrip code I have

Code:

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}

function warp(){
window.location=gotolink
}

var myimages=new Array()
var gotolink="#"

function preloadimages(){

   for (i=0;i<preloadimages.length;i++){
	myimages[i]=new Image()
	myimages[i].src=preloadimages.arguments[i]
       }
}


preloadimages("Exhib1.jpg","Exhib2.jpg","Exhib3.jpg","Exhib4.jpg","Exhib5.jpg")

I would greatly appreciate any help and I thank your all for your time and help in advance.

Cheers,

Aleksandr Antonov

antonovfineart@gmail.com
or just message me here.

sunfighter · 01-24-2013, 03:37 PM

This is the correct function replace yours:

Code:

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}

This line will display nothing as your origanal image because you do not have a plane0.gif. Change that to the name of the image you want displayed.

Code:

<a href="javascript:warp()"><img src="plane0.gif" name="targetimage" border=0></a>

Lastly, make sure your images are not in a separate folder. I keep mine in a folder named "images" so my preload would be

Code:

preloadimages("images/Exhib1.jpg", ........

Cheshire · 01-24-2013, 06:14 PM

sunfighter

Thank you very much for your help ! Everythng works just like I wanted it to !