1 Reply Latest reply: Dec 10, 2013 6:36 AM by Jon Fritz II RSS

    Will someone please help me to create a JavaScript Rollover?

    Noradc Community Member

      Hello.  I have attached a .js file to an html page in the head of the document.  And I would like to add javascript to image files containing links to other pages.  I've copied the code from the html page to the .js file then added the mouseover and mouseout code.  I then added the name="roll_1" to the <img> tag.  But the rollover didn't work.  I noticed that a syntax error appeared with a message saying that "code hinting may not work until you fix this error."  I could have the rollerover in the html page, but I'd rather that it be in a separate file.  I've included the following information...    Thank you very much.

       

       

      HTML Page:

       


      <div class="digital_page">


      <digital_page_thumbnail ul>


      <digital_page_thumbnail li >

      <a href="digital_media/still image.html"><img src="images/digital_page/foodscale_thumbnail3.jpg"> </a></digital_page_thumbnail li>


      </digital_page_thumbnail ul>

      </div>


      JavaScript Page:

       

      <div class="digital_page">

       

       

      <digital_page_thumbnail ul>

       

       

      <digital_page_thumbnail li >

      <a onmouseover="document.roll_1.src='images/digital_page/still_images_thumbnail.jpg'" onmouseout="document.roll_1.src='images/digital_page/foodscale_thumbnail3.jpg'" href="digital_media/still image.html">

      <img src="foodscale_thumbnail3.jpg" width="200" height="200" name="roll_1"> </a>

      </digital_page_thumbnail li>

       

      </digital_page_thumbnail ul>

       

      </div>

        • 1. Re: Will someone please help me to create a JavaScript Rollover?
          Jon Fritz II CommunityMVP

          That javascript page isn't right. .js file needs to be javascript, not html with javascript-esque code in it.

           

          Here is the smallest javascript rollover code I know of, it would go into your html page (everything goes within the image tag itself, no external file)...

           

          <img  src="off_image.jpg" onmouseover="this.src='on_image.jpg';" onmousedown="this.src='active_image.jpg';" onmouseout="this.src='off_image.jpg';" />