Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript : Display Image on Mouseover

Posted on 2008-06-23
4
Medium Priority
?
7,914 Views
Last Modified: 2013-11-19
Hello

Could someone tell me how to change the thumbnail images (on the url below) when the thumbnail is hovered over instead of clicked on

http://www.studio10photography.co.uk/gallery.php

Thanks
0
Comment
Question by:kevinb4940
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 21850901
Here you go:
<!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><base href="http://www.studio10photography.co.uk/gallery.php"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery</title>
</head> 
<body>
<table width="400" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td colspan="4"><div align="center"><img src="pix2/image_a.jpg" align="middle" border="0" width="380 height="225" name="large"></div></td>
  </tr>
  <tr> 
    <td colspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td bordercolor="#FFFFFF"><div align="center"><a href="void()" onmouseover="javascript:image_click(0)"><img src= width="90 height="80" name="pimage0" border=0></a></div></td>
    <td bordercolor="#FFFFFF"><div align="center"><a href="void()" onmouseover="javascript:image_click(1)"><img src= width="90" height="80" name="pimage1" border=0></a></div></td>
    <td bordercolor="#FFFFFF"><div align="center"><a href="void()" onmouseover="javascript:image_click(2)"><img src= width="90" height="80" name="pimage2" border=0></a></div></td>
    <td bordercolor="#FFFFFF"><div align="center"><a href="void()" onmouseover="javascript:image_click(3)"><img src= width="90" height="80" name="pimage3" border=0></a></div></td>
  </tr>
  <tr> 
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(4)"><img src= width="90 height="80" name="pimage4" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(5)"><img src= width="90 height="80" name="pimage5" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(6)"><img src= width="90 height="80" name="pimage6" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(7)"><img src= width="90 height="80" name="pimage7" border=0></a></div></td>
  </tr>
  <tr>
     <td><div align="center"><a href="void()" onmouseover="javascript:image_click(8)"><img src= width="90 height="80" name="pimage8" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(9)"><img src= width="90 height="80" name="pimage9" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(10)"><img src= width="90 height="80" name="pimage10" border=0></a></div></td> 
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(11)"><img src= width="90 height="80" name="pimage11" border=0></a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 
<!--- THESE BLOCKS OF CODE CONTROL HOW THE IMAGES ARE DISPLAYED---> 
<script language="JavaScript">
<!--
//thumbnail script
image0 =new Image();
image1 =new Image();
image2 =new Image();
image3 =new Image();
image4 =new Image();
image5 =new Image();
image6 =new Image();
image7 =new Image();
image8 =new Image();
image9 =new Image();
image10 =new Image();
image11 =new Image(); 
// This defines the source of the display image 
image0.src ="pix2/image_a.jpg"
image1.src ="pix2/image_b.jpg"
image2.src ="pix2/image_c.jpg"
image3.src ="pix2/image_d.jpg"
image4.src ="pix2/image_e.jpg"
image5.src ="pix2/image_f.jpg"
image6.src ="pix2/image_g.jpg"
image7.src ="pix2/image_h.jpg"
image8.src ="pix2/image_i.jpg"
image9.src ="pix2/image_j.jpg"
image10.src ="pix2/image_k.jpg"
image11.src ="pix2/image_l.jpg" 
// This defines the source of the preview image 
document.images['pimage0'].src=image0.src;
document.images['pimage1'].src=image1.src;
document.images['pimage2'].src=image2.src;
document.images['pimage3'].src=image3.src;
document.images['pimage4'].src=image4.src;
document.images['pimage5'].src=image5.src;
document.images['pimage6'].src=image6.src;
document.images['pimage7'].src=image7.src;
document.images['pimage8'].src=image8.src;
document.images['pimage9'].src=image9.src;
document.images['pimage10'].src=image10.src;
document.images['pimage11'].src=image11.src; 
// This defines what to do when an image is clicked on 
function image_click(clicks)
{
if(clicks==0){document.images['large'].src=image0.src;}
if(clicks==1){document.images['large'].src=image1.src;}
if(clicks==2){document.images['large'].src=image2.src;}
if(clicks==3){document.images['large'].src=image3.src;}
if(clicks==4){document.images['large'].src=image4.src;}
if(clicks==5){document.images['large'].src=image5.src;}
if(clicks==6){document.images['large'].src=image6.src;}
if(clicks==7){document.images['large'].src=image7.src;}
if(clicks==8){document.images['large'].src=image8.src;}
if(clicks==9){document.images['large'].src=image9.src;}
if(clicks==10){document.images['large'].src=image10.src;}
if(clicks==11){document.images['large'].src=image11.src;}
}
// --></script>  
</body>
</html>

Open in new window

0
 

Author Comment

by:kevinb4940
ID: 21850937
Thanks  hielo
0
 
LVL 82

Expert Comment

by:hielo
ID: 21850941
You are welcome!
0
 

Author Closing Comment

by:kevinb4940
ID: 31469969
Very Pleased!!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

636 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