...

View Full Version : Switching Image in single Div



r3drum
11-16-2010, 09:41 PM
Hello,

I've been struggling to find a decent code example of how to create a switching image in a div when you hover over an anchor.

What I'm trying to create is a layout where I can have multiple anchors that link to multiple images that are shown in a single div or frame.

Any suggestions would be greatly appreciated.

NoeG
11-17-2010, 12:59 AM
thats very hard to understand, do you know a site with an example of something you want your layout to look like? maybe we could better understand how to help you

Stubworth
11-17-2010, 01:34 AM
I'd suggest trying to use a Javascript image gallery.

Check out:

http://valums.com/javascript-image-galleries/

You can probably adapt the second one down to the functionality you're describing.

All of the above is a suggestion based on what I can ascertain from your post, if it's not helpful, oops! :)

r3drum
11-17-2010, 08:05 PM
Here's an example that was created by someone but it is using tables... Basically a sliced photoshop image so the code is a mess but it does what I'd like to do only with better compliant code. Notice how when you hover over one of the yellow arrows it switches the image in the box on the layout. I'd lik to do this only with using html and css. Java script would be ok too I suppose but I don't know hardly anything in java.

http://hughgriffithvt.com/fairhill/main_level.html

Here's another example using a javascript lighbox that is something I would not like to use but has better more compliant code.

http://hughgriffithvt.com/emeraldglen_vt/index.html

Thanks,

santhoshj400
11-18-2010, 05:13 AM
Hi,
you can try out with j query to switch the images the logic is

when you click the image

link is below
http://www.queness.com/resources/html/slideshow/jquery-slideshow.html

rpotech
11-18-2010, 09:28 AM
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>image test</title>
<script type="text/javascript">
//--Preload Images
var image1=new Image()
image1.src="img1.jpg"
var image2=new Image()
image2.src="img2.jpg"
var image3=new Image()
image3.src="img3.jpg"

function changeImage(imageId, new_Image){
document.getElementById(imageId).src=new_Image
}
</script>
</head>
<body>
<div id="anchors"></div>
<ul>
<li><a id="anchor1" href="#" onmouseover="changeImage('imgholder','img1.jpg')">Anchor 1</a></li>
<li><a id="anchor1" href="#" onmouseover="changeImage('imgholder','img2.jpg')">Anchor 2</a></li>
<li><a id="anchor1" href="#" onmouseover="changeImage('imgholder','img3.jpg')">Anchor 3</a></ul></li>
<div id="image_display"><img id="imgholder" src="startimg.jpg" /></div>
</body>
</html>

</code>

teedoff
11-18-2010, 03:08 PM
Not sure if they would have what your looking for, but I use dynamicdrive (http://www.dynamicdrive.com) quite a bit. They have tons of code snippets. Anything from floating snowflakes to very advanced image viewers.

Excavator
11-19-2010, 03:05 AM
Hello r3drum,
It doesn't have to be js ... It can be just plain ol' CSS too. Have a look at this example (http://nopeople.com/CSS/disjointed_rollover/index.html).

DrDOS
11-19-2010, 03:30 AM
How about something like this?

http://ronbeau.50webs.com/Latest/

getbestproduct
11-23-2010, 03:52 AM
You can create you div then place in an image:
<div><img src="http://mysite.com/image/placeholder.jpg" id="switchingimage"></div>

<a href="http://mysite.com/images/image1.jpg" onmousevover="RevealImg(this.href)">
<a href="http://mysite.com/images/image1.jpg" onmousevover="RevealImg(this.href)">
<a href="http://mysite.com/images/image1.jpg" onmousevover="RevealImg(this.href)">

Create a javascript function:

function RevealIm(url){
if(url!=''){
document.getElementById("switchingimage").src=url;
}
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum