Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
- CommentAuthorMinnaloushe
- CommentTimeMay 14th 2008
Hi - I am trying to do a css image swap that's a little different than those I've done before. Basically, I have a large image, which will have image map hotspots over various buildings - when you click on those various hotspots, I want an image to change in another div - so the main image never changes, but a secondary image does depending on which hotspot you click.
I'd also like to have a secondary functionality added where you can just click a next arrow, and scroll through each secondary image instead of having to click each hotspot...
Any ideas??
Thanks!! -
I assume you don't want to do this with just CSS (since there's an onclick function)?
There are many different ways you can do this. You can do something like:
<div>
<!-- myNewImg1 refers to the 2nd image associated with this particular hotspot -->
<a href="" onclick="changeImg('myNewImg1')"><img src="img1.jpg" /></a>
</div>
<div id="newImg"></div>
Javascript:
function changeImg(img){
document.getElementById("newImg").innerHTML = "<img src='" + img + ".jpg' />";
}
For the arrow, you can use a different JS function that has a counter, and increase/decrease the counter when you click on the arrows and change the image according to what the count is. It might be easiest if you follow a certain naming convention for the images, so you can change it dynamically. -
Hi Minnaloushe,
I would agree with soullD. You could nest the div in which you want to appear the small image inside the main div and style it with :focus. But when you click somewhere else, the image is gone.
The script above looks good, but for the arrows I would look for some js image gallery that provides smooth scrolling/image swap.
1 to 3 of 3