Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Location
    Denver
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,087
    Thanks
    23
    Thanked 593 Times in 592 Posts
    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", ........

  • Users who have thanked sunfighter for this post:

    Cheshire (01-24-2013)

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Location
    Denver
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    sunfighter

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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •