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.

  1.  permalink
    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!!
    • CommentAuthorsoulID
    • CommentTimeMay 14th 2008 edited
     permalink
    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.
    • CommentAuthordave_o
    • CommentTimeMay 14th 2008
     permalink
    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.
Add your comments
    Username Password
  • Format comments as (Help)