Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

JavaScript Forum


You are currently viewing our JavaScript Forum as a guest. Please register to participate.
Login



Reply
onmouseover image gallery
Old 03-22-2008, 06:35 PM onmouseover image gallery
Skilled Talker

Posts: 78
Name: Michael McNamee
Trades: 0
Hi,

I am trying to create a block of thumbnail images on my home page, which you can move the cursor over to see a larger image. It would be a great way to give visitors an idea of what we are selling. I found what I am looking for here.

This code goes in the HEAD section-

function update(url,index,isSuper) {
document['PhotoBig'].src=url;
}

And this goes in the BODY section-

<div style="margin-left: 30%;">

<img src="images/pic1.gif" name="PhotoBig" style="border:1px solid black">

<table>
<tr>
<td>
<a onMouseOver="update('images/pic1.gif', 0, false); return false;">
<img src="images/pic1-sm.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('images/pic2.gif', 1, true); return false;">
<img src="images/pic2-sm.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('images/pic3.gif', 2, true); return false;">
<img src="images/pic3-sm.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('images/pic4.gif', 3, true); return false;">
<img src="images/pic4-sm.gif" style="border:1px solid black">
</a>
</td></tr>
<tr>
<td colspan="4" style="text-align: center; font: .8em 'Comic Sans MS', Arial;">
Move the cursor over the images/picture you wish to preview.
</td>
</tr><tr>
<td>
<a onMouseOver="update('images/pic5.gif', 4, true); return false;">
<img src="images/pic5-sm.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('images/pic6.gif', 5, true); return false;">
<img src="images/pic6-sm.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('images/pic7.gif', 6, true); return false;">
<img src="images/pic7-sm.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('images/pic8.gif', 7, true); return false;">
<img src="images/pic8-sm.gif" style="border:1px solid black">
</a>
</td>
</tr>
</table>

</div>

Do I simply replace the bit following <imgsrc= with the image location of the image, and how do I situate the whole thing exactly where I want it on my home page ?

Hope someone has some advice, and thanks in advance, Mickmac
Mickmac is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Reply     « Reply to onmouseover image gallery
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.45691 seconds with 12 queries