Not signed in (Sign In)

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.


Archive: Swapping images

Bottom of Page

1 to 3 of 3

  1.  
    • CommentAuthorphilips
    • CommentTimeNov 12th 2006
     
    Right, I'll try to explain this as best I can...
    I'm working on a commerce site. I have created a map in Illustrator which has different versions - the actual map stays the same but, for example all bars are located by numbered yellow "blobs", another version of the map has all restaurants located by numbered red blobs.

    I'm sure this is simple and a rollover image/behavior seems to heading in the right direction BUT, can I have a navigation bar above the map and, when the user mouses over/clicks the yellow "Bars" button, the map changes to that version i.e. the original map just showing the location blobs of the bars?

    If this is possible, is it possible for this version of the map to remain there until another button on the navbar, say Restaurants is moused over?

    Many thanks.
    • CommentAuthorsurfer
    • CommentTimeNov 12th 2006
     
    You're going to require either opening replacement pages, or to rewrite sections of current pages when the links are clicked. Write a cookie to check for the presence of a condition, if that condition is met then they receive a page with a specific map. If they click a different button the cookie gets overwritten/replaced and they receive pages with the new relevant map on them.
    • CommentAuthorjohn
    • CommentTimeNov 12th 2006
     
    I just did something similar where multiple images had to be changed from various links.

    Code:

    Javascript

    function swapImages(newimg, newimgtitle){
    document.largeimg.src='images/'+newimg+'.jpg';
    document.largeimg.title= ""+newimgtitle;
    }

    HTML for Top Menu
    //pass the name of the map image you want to swap to:
    <a href=# onClick="swapImages('map1', 'title 1');">MenuItem1<a>
    <a href=# onClick="swapImages('map2', 'title 2');">MenuItem2<a>
    <a href=# onClick="swapImages('map3', 'title 3');">MenuItem3<a>
    etc...

    Large Image HTML
    <img src="images/map0.jpg" name="largeimg" id="largeimg" alt="" title="">




    You may want to use absolute paths rather than relative.
    Could use list items around the anchors
    JS swapImages can be used from any link on the page to change largeimg.src
    onClick could be onMousover and have a second operation for onMouseout (or not).

    If you need to swap captions I have a solution for that too.

1 to 3 of 3

  1.