HTML image swap

[rissac]

Hello, I can't seem to get the thumb nail images to swap out the bigger image. What is want is everytime you roll over a thumbnail the bigger image changes. Does any one have any suggestions? There is a link below. Thanks.

http://www.sergeeustache.com/Temp/Swap/listingtemp.htm

Serge Eustache

 

[Foamcow]

Yes, use Javascript or CSS image swapping.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[rissac]

Do you know of any good sources for javascript of css for what I'm trying to do?

Serge Eustache

 

[Foamcow]

Hmmm,
Google is a suprisingly good reference...

http://www.google.co.uk/search?q=css+image+rollover

http://www.google.co.uk/search?q=css+image+swap

http://www.google.co.uk/search?q=javascript+image+rollover

http://www.google.co.uk/search?q=javascript+image+swap

Take your pick

Personally I would favour a CSS method over a Javascript one.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time

 

[rissac]

Thanks for your help.

Serge Eustache

 

[rissac]

I've figured out how to do some image swaping but with the code that I have, I can't figure out how to swap multiple images using multiple thumb nails on the same page. Take a look below. Do you have any suggestions?

http://www.sergeeustache.com/Temp/Swap/listings2.html

Serge Eustache

 

[Xaqte]

Take a look at:

http://www.stunicholls.myby.co.uk/menu/magnify.html

He got some other photo gallery demos...

Let us know your results!

X

 

[ChrisHirst]

why not look in your other thread

thread770-1073825

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[rissac]

My results actually came through with a little script provided below. And it works great. Thank you all for your help.



Plcae this part inside your head tags change your image source in this part. (including width and height)
==============================================================

<script language="javascript">
//script found on

http://www.a1javascripts.com

//all credit to unknown author
<!-- hide script from old browsers

window.onerror = null;

var netscape = 0;
var goodIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ netscape = 1; }
if (browserName == "Microsof" && browserVer >= 4)
{ goodIE = 1; }
// end error trapping code


if (netscape || goodIE) {

pic1 = new Image(150,100);
pic1.src = "default.gif";
pic2 = new Image(150,100);
pic2.src = "firstswap.gif";
pic3 = new Image(150,100);
pic3.src = "secondswap.gif";

a1 = new Image(100,50);
a1.src = "upbutton1.gif";
a2 = new Image(100,50);
a2.src = "downbutton1.gif";
b1 = new Image(100,50);
b1.src = "upbutton2.gif";
b2 = new Image(100,50);
b2.src = "downbutton2.gif";
}

function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2) {
if (netscape || goodIE) {
document.images

.src = eval(imgObjName + ".src");
document.images

.src = eval(imgObjName2 + ".src");

}}

//end hiding -->
</script>

====================================================
place these parts where you want your images to show
=====================================================
big image
----------------------------------------
<img SRC="default.gif" NAME="pic" ALT="Default Image" height=100 width=150>
----------------------------------------
buttons
----------------------------------------
<a href="your-page.html" onMouseOver="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;" onMouseOut="hiLite('pic','pic1','a','a1'); window.status='';return true;" onclick="window.focus()"><img SRC="upbutton1.gif" NAME="a" ALT="Button 1" BORDER=0 height=50 width=100></a>
<a href="your-page.html" onMouseOver="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;" onMouseOut="hiLite('pic','pic1','b','b1'); window.status='';return true;" onclick="window.focus()"><img SRC="upbutton2.gif" NAME="b" ALT="Button 2" BORDER=0 height=50 width=100></a>





Serge Eustache