Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5

Thread: Help please!

  1. #1
    Junior Member
    Join Date
    Nov 2008
    Posts
    2
    Member #
    17783
    Hallo!
    On my new website I have a couple of images that correspond with the with the links in the menu. What I would like to do is that when you roll over an image (or the corresponding link in the menu) all other images fade and the corresponding link changes color. An example of this can be found on www.possehl-spezialbau.de. Anybody has an idea how to do that???

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    They use a Javascript to swap-out images on a mouse-over event ...

    Here is one image:
    http://www.possehl-spezialbau.de/images/button2.jpg

    Then, the swapped-out image:
    http://www.possehl-spezialbau.de/images/hover2.jpg

    They change the number "2" to a different number for another image.

    You can even view their Javascript here:
    http://www.possehl-spezialbau.de/lib/script.js



    .


  4. #3
    Junior Member
    Join Date
    Nov 2008
    Posts
    26
    Member #
    17777
    Yeppers Java Script is a godsend for things like that. Pretty simple to use and install as well.

  5. #4
    Junior Member
    Join Date
    Nov 2008
    Posts
    2
    Member #
    17783
    Tanks! Now I have been studying the javascript code, but since I have no experience with it, I just dont get it!
    function exchange (picnr, flag) {
    var picture;
    var linkcolor = (flag == 1) ? "#000000" : "#006ab4";
    for(var i=1; i<=maximages; i++) {
    if (i==picnr) {
    picture = (flag == 1) ? "active" : "normal";
    } else {
    picture = (flag == 1) ? "highlight" : "normal";
    }
    var newimage = picture + i;
    window.document.images["images" + i].src = eval(newimage + ".src");
    }
    document.getElementById("link" + picnr).style.color = linkcolor;

    (I left the picture sources out here) Copying the code and changing the values doesnt work, so can somebody translate that for me?

    Thanks!

  6. #5
    Junior Member
    Join Date
    Nov 2008
    Posts
    26
    Member #
    17777
    Ok I pulled this up with google...

    Put this code in your header

    PHP Code:
    <script language="JavaScript" type="text/javascript">
    /* This Code Free To Use As Long As These Lines Remain */
    /* DOM Image Rollover Code */
    /* Created by Chris Poole <http://www.chrispoole.com> */
    /* Featured at <http://www.DesignerWiz.com> */
    /* Development Resource & JavaScript Public Archive Center */
    function init() {
    if (!
    document.getElementById) return
    var 
    imgOriginSrc;
    var 
    imgTemp = new Array();
    var 
    imgarr document.getElementsByTagName('img');
    for (var 
    0imgarr.lengthi++) {
    if (
    imgarr[i].getAttribute('hsrc')) {
    imgTemp[i] = new Image();
    imgTemp[i].src imgarr[i].getAttribute('hsrc');
    imgarr[i].onmouseover = function() {
    imgOriginSrc this.getAttribute('src');
    this.setAttribute('src',this.getAttribute('hsrc'))
    }
    imgarr[i].onmouseout = function() {
    this.setAttribute('src',imgOriginSrc)
    }
    }
    }
    }
    onload=init;
    </script> 
    Now when you want a image to roll over use this code in your body.

    PHP Code:
    <img src="before.gif" hsrc="after.gif"
    I beleive you can add hyperlinks if you want as well


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com