Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Location
    SAN JOSE, CA Status: Pimp
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow NEWBIE: Whats this Java Called?

    www.hosting.com
    Put your mouse over dedicated server and the other link. It has some kind of roll over. But the imager stays in the same place while changing?
    Can anyone link me to this java on a site or what it is called?

    I am not talking about this kind of java, image swap.
    http://www.hosting.com/dedicated.jsp at the top

    thanks so much!!!

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    okay what are you talking about??

    When you click over those four things, it does 2 things
    1) Changes link color...CSS a:hover
    2)Image Swap done with javascript not hard
    FormName.ImageName.src='blah.jpg';

    What do you want to know exactly??

    A1ien51

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Location
    SAN JOSE, CA Status: Pimp
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want to make the same thing..but i don't know what that is called....
    I want to make like cd button....then when the users puts his mouse over cds....in the box a picture of cd's will show...then when he puts his mouse over cs player..a cd player picture will appear in the same box....

  • #4
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First off, there is no text in the link, it's an image, and only an image.

    What they did (view Script under the "Navigations Table" Comment tag), is change the image source with JavaScript using the onmouseover and onmouseout JavaScript event handlers, which you can read more about Here, under the "Understanding Event Handlers" section.

    And to do the stuff you want, you could use the <DIV> tag or do what it says in Accessing Images and Rollovers section.

    Guardian

    If your new to JavaScript, the best place on the net(if you ask me) to go, is the www.wsabstract.com (Which is also the Administrator's) Web Site.
    If your not, when you see something interesting, view it's source and then experiment with it, I find that helps in the understanding of JS(and HTML)...
    Last edited by Guardian23; 07-04-2002 at 08:29 AM.

  • #5
    New to the CF scene
    Join Date
    Jul 2002
    Location
    SAN JOSE, CA Status: Pimp
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hmm thanks

    is this easy to a beginner? this source

  • #6
    New Coder
    Join Date
    Jul 2002
    Posts
    73
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't Script for others often, but try this:


    <A href="cds.html" onmouseover="function1(cds)"
    onmouseout="function1(DEFAULT_PIC)"> //onmouseout returns Picture to DEFAULT, this may or may not be desired...
    CDS
    </A>
    //don't actually insert a return carriage in the tags, I just did it for clarity
    <A href="cdplayer.html" onmouseover="function1(cdp)"
    onmouseout="function1(DEFAULT_PIC)">
    CDPLAYER
    </A>

    <IMG NAME="NAME" SRC="DEFAULT_PIC"></IMG>
    //insert comment tags in SCRIPT if desired, but whatever

    <SCRIPT>
    function function1(IMGNAME){
    document.NAME.src=IMGNAME+".XXX" /*NAME and IMGNAME may have to be defined, I don't do this type of function often*/
    }
    </SCRIPT>

    Guardian,

    PS: Welcome to dump(comment negatively) on this SCRIPT, All Input is welcome

  • #7
    New Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey,

    the effect you're talking about could be done with a straight rollover function on one image place.

    something like this:

    <script>
    mainImage = new Image();
    image1 = new Image();
    image2 = new Image();

    mainImage.src = "someURL/mainImage.gif"
    image1.src = "someURL/somePic.gif"
    image2.src = "someURL/anotherPic.gif"

    //the above ensures that all images and referenced and loaded into memory so that the function below knows what to change.

    function changeImage(imagePlace,ImageName)
    { if (document.images)
    { document[imagePlace].src = eval(ImageName+".src") }
    }
    </script>

    And then in the body of the HTML place your main image and give it a name - say <img name="mainImage" src="someImage.gif">

    When you place the images that act as links, add the rollover code to onMouseOver and onMouseOut - something like this:

    <A href="somelink.html" onMouseOver="changeImage('mainImage','image1')" onMouseOut="changeImage('mainImage','mainImage')>
    <img src="someImage.gif">
    </a>

    <A href="somelink.html" onMouseOver="changeImage('mainImage','image2')" onMouseOut="changeImage('mainImage','mainImage')>
    <img src="anotherImage.gif">
    </a>

    The important point to note is that the image place value does not change - this means that the script will substitute a new image in the single location on the screen for whatever link is rolled over.

    I hope that all made sense ...

    good luck

    Azz
    code, debug, dubug, debug, *SIGH* debug, debug ...


  •  

    Posting Permissions

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