SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Non-Member MaxLax44's Avatar
    Join Date
    Sep 2005
    Location
    Rochester, NY
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover image question

    I have 4 images on my page set with different rollover images for each one. I wanted to know if it was possible to have another image pop up when one of the original ones is rolled over. So there are 2 images, and 1 rollover image for each of the two. Can I make both rollover images appear by just rolling over 1 of them?

    Here is the script:
    Code:
    <script type="text/javascript">
    <!--
    // copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
    // Distribute this script freely, but please keep this 
    // notice with the code.
    
    var rollOverArr=new Array();
    function setrollover(OverImgSrc,pageImageName)
    {
    if (! document.images)return;
    if (pageImageName == null)
        pageImageName = document.images[document.images.length-1].name;
    rollOverArr[pageImageName]=new Object;
    rollOverArr[pageImageName].overImg = new Image;
    rollOverArr[pageImageName].overImg.src=OverImgSrc;
    }
    
    function rollover(pageImageName)
    {
    if (! document.images)return;
    if (! rollOverArr[pageImageName])return;
    if (! rollOverArr[pageImageName].outImg)
        {
        rollOverArr[pageImageName].outImg = new Image;
        rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
        }
    document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
    }
    
    function rollout(pageImageName)
    {
    if (! document.images)return;
    if (! rollOverArr[pageImageName])return;
    document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
    }
    //-->
    </script>
    
    <script type="text/javascript">
    <!--
    setrollover('BoxDyeOver.jpg', 'Dye');
    setrollover('BoxPaintOver.jpg', 'Paint');
    setrollover('BoxPartsOver.jpg', 'Parts');
    setrollover('BoxStoreOver.jpg', 'Store');
    //-->
    </script>
    And here are the images that have rollovers right now:
    Code:
    <div><img src="BoxGapLeft.jpg" alt="BoxGapLeft"><a href="DyePage/DyePage.html" onmouseover="rollover('Dye')" onmouseout="rollout('Dye')"><img src="BoxDye.jpg" name="Dye" alt="Dye"></a><img src="BoxGapMid.jpg" alt="BoxGapMid"><a href="PaintPage/PaintPage.html" onmouseover="rollover('Paint')" onmouseout="rollout('Paint')"><img src="BoxPaint.jpg" name="Paint" alt="Paint"></a><img src="BoxGapMid.jpg" alt="BoxGapMid"><a href="PartsPage/PartsPage.html" onmouseover="rollover('Parts')" onmouseout="rollout('Parts')"><img src="BoxParts.jpg" name="Parts" alt="Parts"></a><img src="BoxGapMid.jpg" alt="BoxGapMid"><a href="StorePage/StorePage.html" onmouseover="rollover('Store')" onmouseout="rollout('Store')"><img src="BoxStore.jpg" name="Store" alt="Store"></a><img src="BoxGapRight.jpg" alt="BoxGapRight"></div>
    Now I want to have these images have rollover images when the corresponding images above do:
    Code:
    <div><img src="BoxDyeU.jpg" alt="BoxDyeUnder"><img src="BoxPaintU.jpg" alt="BoxPaintUnder"><img src="BoxPartsU.jpg" alt="BoxPartsUnder"><img src="BoxStoreU.jpg" alt="BoxStoreUnder"><div>

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Long time ago I recomend someone css only solution, it is not perfectly done there, but it works completely without js. You can see it here http://www.masozravky.eu/

  3. #3
    Non-Member MaxLax44's Avatar
    Join Date
    Sep 2005
    Location
    Rochester, NY
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A guide in english would be nice.

  4. #4
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is combination of two technics. First one here http://wellstyled.com/css-nopreload-rollovers.html and second one here http://psacake.com/web/jl.asp


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
  •