Hi everyone,

I'm making a website to host my digital art. To display the art, I was thinking of a cool way to do it that probably involves JS (most likely).

There will be a box at the top of the page (the Viewing Area). Below the box will be lots of thumbnails of the art that I'm posting. When the person rolls over the thumbnail, I want it to display a scaled-down but proportional version of the piece of art in the Viewing area.

Anybody have any idea of how to do this? Also, tell me if I'm not being clear enough because I bet it looks confusing written down like that =)

Thanks!

Check out http://moon-wave.net/ and look on the right side under the affiliates section... When you hover over the different, links, their button shows up... Is that what you are talking about... only with thumbnails instead of text?

Yes!

Okay, try this...

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
button00 = new Image
button01 = new Image
button02 = new Image
button03 = new Image
button04 = new Image
button05 = new Image
button06 = new Image
button07 = new Image
button08 = new Image
button00.src = "image"
button01.src = "image"
button02.src = "image"
button03.src = "image"
button04.src = "image"
button05.src = "image"
button06.src = "image"
button07.src = "image"
button08.src = "image" }// -->
</script>

put this in your code where you want the script to be. The green should be the URL of the full size images with button00.src being the default image that will show when the page loads. If you want to add more, just continue with button09.src = "image" and so on...

<center><img src="image" name="name"></center>

Here, change the green to the default image as well. Change the red to whatever you want but make it something easy like thumbs. Put this code where you want the big images to show up.

<p>

<img src="image" onMouseOver="document.name.src=button01.src" onMouseOut="document.name.src=button00.src">

<img src="image" onMouseOver="document.name.src=button02.src" onMouseOut="document.name.src=button00.src">

<img src="image" onMouseOver="document.name.src=button03.src" onMouseOut="document.name.src=button00.src">

<img src="image" onMouseOver="document.name.src=button04.src" onMouseOut="document.name.src=button00.src">

<img src="image" onMouseOver="document.name.src=button05.src" onMouseOut="document.name.src=button00.src">

<img src="image" onMouseOver="document.name.src=button06.src" onMouseOut="document.name.src=button00.src">

<img src="image" onMouseOver="document.name.src=button07.src" onMouseOut="document.name.src=button00.src">

<img src="image" onMouseOver="document.name.src=button08.src" onMouseOut="document.name.src=button00.src">

Change the image to the actual URL of the thumbnails that the user will rollover. Change the name to the same thing you changed it to at the top. It has to be the same because it won't work otherwise. Put this part of the code where you want the thumbnails to be.

Thank you so much. Thanks for color-coding it and putting in explanations because I looked at the source on that site and was so very confused.

Thank you so much. Thanks for color-coding it and putting in explanations because I looked at the source on that site and was so very confused.

No problem. If you try it out, and it doesn't work, just post back here and we'll see if we can figure it out =)

Well, I'm back again =D

I tried to get the code to work and I have the images but the roll-over / linking isn't working.

Here's the site on the web so you can check the source.

http://www.creativity-pixelfied.com/colorscollide/test.htm

Thanks!

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
button00 = new Image
button01 = new Image
button02 = new Image
button03 = new Image
button04 = new Image
button05 = new Image
button06 = new Image
button07 = new Image
button08 = new Image
button09 = new Image
button10 = new Image
button11 = new Image
button12 = new Image
button13 = new Image
button14 = new Image
button15 = new Image
button16 = new Image
button00.src = "images/blank.gif"
button01.src = "art/dancingthenightaway.jpg"
button02.src = "art/mydemons.jpg"
button03.src = "art/itendstonight.jpg"
button04.src = "art/award.png"
button05.src = "art/apo.jpg"
button06.src = "art/mistressofdisguise.jpg"
button07.src = "art/girlsbestfriend.jpg"
button08.src = "art/illfight.jpg"
button09.src = "art/pain.jpg"
button10.src = "art/soeasy.jpg"
button11.src = "art/mywaytoyou.jpg"
button12.src = "art/sense.jpg"
button13.src = "art/twofaced.jpg"
button14.src = "art/newbeginning.jpg"
button15.src = "art/fool.jpg"
button16.src = "art/timewilltell.png" }// -->
</script>

Add the red part ;)

Other than that, I don't see anything wrong with the code...

Whoops!

Okay I think I've got it figured out. Now I just have to uploade the scaled down versions of the art so that the rollover doesn't take up the whole screen and then add links. Thanks so much for your help and quick responses!

I just checked the link you gave and it seems to be working =)

You're welcome!