Advanced Search

Results 1 to 7 of 7

Thread: brainstorming - dual access rollover images

  1. #1
    Join Date
    Oct 2009
    Location
    New York
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default brainstorming - dual access rollover images

    <a href="http://www.miniboom.net/jon/">http://www.miniboom.net/jon/</a>

    So the goal is that I will have a single rollover image accessible from two points. The first point will be from the bottom menu. Using javascript, I can rollover the menu item and the photo assigned to that menu item will swap. In addition, rolling over the assigned image will cause it to swap as well.
    Each isolated action (css image swap for rolling over the image OR javascript "onMouseOver" command for the menu/image link) I know how to do, what I don't know how to do is to combine it so that a single swap image can be triggered from two different locations. What do you think? Am I going to need to use hot spots somehow? Any other ideas. It's just me, so bouncing ideas back and forth would be great.
    Cheers!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    If your onclick event is robust enough, most are, you may run it as any event on any element on the page. What's it look like?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2009
    Location
    North Carolina
    Posts
    71
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Default

    Wait are you simply saying that you have 2 items images, divs, whatever and you want EACH of them to change the same image? I'm probably misunderstanding this as it seems very simple.

    IF I'm not here's an example: http://fassist.comyr.com/rolloverexample/

    the code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>rollover example</title>
    <script type="text/javascript">
    var prevSrc;
    var img;

    function changeImg(id,newimg) {
    img = document.getElementById(id);

    prevSrc = img.src;

    img.src = newimg;
    }

    function changeImgBk() {
    img.src=prevSrc;
    }
    </script>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    </head>
    <body>
    <a href=#" onMouseOver="changeImg('image1','untitled2.JPG');" onMouseOut="changeImgBk();">
    link 1</a>
    <a href=#" onMouseOver="changeImg('image1','untitled2.JPG');" onMouseOut="changeImgBk();">
    link 2</a>
    <img id="image1" src="untitled.JPG">
    </body>
    </html>
    A very simple script, changeImg the first part is what the ID of the image you want to change is the second part is the new images src. Then the changeImgBk command simply changes it back to the original image. Hope it helps some if it's not what you wanted maybe it will help you on your way!

    Tim

  4. #4
    Join Date
    Oct 2009
    Location
    New York
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I think we're getting here

    John and Tim, thanks for helping me thing about this. John, I guess I'm not sure by what you mean by robust. And the example, sorry tried to link to it using html tags, it's right here, http://www.miniboom.net/jon
    Once you're there, you'll see there's a photo collage with a menu at the bottom. Each menu item is associated with one of the photos, roll over the menu item and one of the photos changes to a black-and-white version. That I know how to do with javascript since it's an active link... BUT I also want to have the option that if a person rolls over the "hot" photo, it also switches to the B&W version - that I know how to do with CSS, but to have both on the same photo seems like my coding would break down. Elegant solutions?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,699
    Thanks
    43
    Thanked 3,132 Times in 3,096 Posts
    Blog Entries
    12

    Default

    Actually, you need (because of css issues with IE prior to IE 8 or it might be prior to 7) a link to do a css rollover. And the image must be a child of that link. However, you don't need a link to do a javascript image rollover. An image may have its own onmouseover and onmouseout events, ex:

    Code:
    <img src="color_1.jpg" alt="" onmouseover="this.src = 'B_W_1.jpg';" 
    onmouseout="this.src = 'color_1.jpg';">
    In fact, if you have a link somewhere else on the page that you want to do the same thing to that image:

    Code:
    <img id="image_1" src="color_1.jpg" alt="" onmouseover="this.src = 'B_W_1.jpg';" 
    onmouseout="this.src = 'color_1.jpg';">
    And elsewhere:

    Code:
    <a href="whatever.htm" onmouseover="document.getElementById('image_1').src = 'B_W_1.jpg';" 
    onmouseout="document.getElementById('image_1').src = 'color_1.jpg';">Link Text</a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Oct 2009
    Location
    New York
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Now that look s like it should work. Thanks for helping me out on this. I really haven't gone as far in javascript as I'd like. I'll try it out. Even if I manage to screw it up, your explanation is clear enough. I think I understand it a bit better. Thank you!

  7. #7
    Join Date
    Dec 2009
    Location
    North Carolina
    Posts
    71
    Thanks
    13
    Thanked 3 Times in 3 Posts

    Default

    I'm confused? Did the code I provided not do what he asked?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •