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 7 of 7
  1. #1
    Junior Member
    Join Date
    Oct 2008
    Posts
    24
    Member #
    17560
    I've been looking through javascript code help and I cant seem to figure it out. I have two images that I want to use for my links. The first image is for the regular links and I have a second image that is the same thing except it has a red screen over the image. I want the roll over or mouse over on the link to show the image with the screen over it.

    I've been at it for a couple hours trying different sites with different code and I cant seem to get it to work.

    Any insight is helpful thank you.

  2.  

  3. #2
    Junior Member
    Join Date
    Oct 2008
    Location
    Atlanta, GA
    Posts
    18
    Member #
    17558
    What you will want to do is name your images something_on.gif or whatever extension you made and something_off.gif. Also, you want to put an id="button1" on the first button and id="button2" on the second button and so on. In a separate file put the following in the page and link it to your main file:

    window.onload = switchImage;

    function switchImage() {
    for(var i=0; i<=document.images.length; i==) {
    if(document.images[i].parentNode.tagName == "A") {
    setupRollover(document.images[i];
    }
    }
    }

    function setupRollover(thisImage) {
    thisImage.outImage = new Image();
    thisImage.outImage.src = thisImage.src;
    thisImage.onmouseout = rollOut;

    thisImage.overImage = new Image();
    thisImage.overImage.src = "images/" + thisImage.id + "_on.gif";
    thisImage.onmouseover = rollOver;
    }

    function rollOut() {
    this.src = this.outImage.src;
    }

    function rollOver() {
    this.src = this.overImage.src;
    }

    This should make it where you don't have to worry about adding more code each time you add an image as long as you follow suit.

  4. #3
    Junior Member
    Join Date
    Oct 2008
    Posts
    24
    Member #
    17560
    the images I have are "home_link" and "home_link2"

    How do I link the seperate file to my index.html file??

    Also, how do I add ID's to them??

  5. #4
    Junior Member
    Join Date
    Oct 2008
    Location
    Atlanta, GA
    Posts
    18
    Member #
    17558
    Quote Originally Posted by tsoadk
    the images I have are "home_link" and "home_link2"

    How do I link the seperate file to my index.html file??

    Also, how do I add ID's to them??
    Simply change the "_.gif" to "_link1.extension".

    To link the page do the following:

    <script type="text/javascript" src="[link_location].js"></script>

  6. #5
    Junior Member
    Join Date
    Oct 2008
    Posts
    24
    Member #
    17560
    okay so what code do i use for the actual link then??

  7. #6
    Junior Member
    Join Date
    Oct 2008
    Location
    Atlanta, GA
    Posts
    18
    Member #
    17558
    What I would do is name each button what it is named, like: home_on.gif, home_off.gif, about-us_on.gif, about-us_off.gif and so on. This way the code can work with you buttons better. Then once you have this done, simply place this code for each button:

    <a href="whatever.html"><img src="/images/home_off.gif" id="home" alt="Home"></a>
    <a href="whatever.html"><img src="/images/about-us_off.gif" id="about-us" alt="Home"></a>...

    Does that make sense?

  8. #7
    Junior Member
    Join Date
    Oct 2008
    Posts
    24
    Member #
    17560
    i got everything working thanks


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:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com