SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2000
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there everyone, hope you're all doing great!

    Well, here's what I'm trying to do without the slightest knowledge of JS.

    I have a navigation bar made up images that were sliced for each section. There's also a separate area of the page that has "description" images, that describe the section the person has rolled over. I want it so that when someone rolls over any image, that image changes to a different color, and there's also a new image in the "description" area that has an explanation of that section.

    I've seen this done a lot, but I've never been good about plugging JS into my pages, though HTML doesn't seem to bother me.

    Anyway, if someone can pass along a cross-browser script that is aetiap (as easy to install as possible!), I would really appreciate it. And maybe some instructions on plugging it in.

    Thanks so much,
    -Falco

  2. #2
    Kat's Meow Senior ******* WebKat's Avatar
    Join Date
    Jul 1999
    Location
    California USA
    Posts
    1,071
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <<< Falco, thought you would have more response in the Client Side Scripting Forum ~ moved from Web Page Design...[/i]WebKat, Community Senior Advisor >>>
    Dlynn :: SitePoint Senior Advisor ::
    PawPrint Designs by WebKat
    "Dogs come when they're called; Cats take a message and get back to you later." ~ Mary Bly

  3. #3
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Falco and welcome to the forum,



    Since you say you have little to no experience with javascript, my standard recommendations for newbies:

    1) book for beginners: SAM's Javascript in 24 hours
    2) the javascript primer: http://www.htmlgoodies.earthweb.com

    Insofar as your problem:

    There are a number of ways to do what you want. One of them is to create a function that executes both actions (rollover link and desc) and to call that function with an onMouseover event handler.

    It can look something like this:

    <a href='javascript:void' onMouseover = "swapImages(1)">
    <img src="pic1.gif"></a>

    function swapImages(imageNum)
    {
    document.images[imageNum].src = myImages[imageNum];
    document.images[ImageNum].src = myDescImages[ImageNum];
    }

    The above presumes that your image sources are in arrays and that they are set up so that the images for pic1, for instance, are in the same position.

    var myImages = new Array();
    myImages[0] = 'pic1.gif';
    myImages[1] = 'pic2.gif';

    var myDescImages = new Array();
    myDescImages[0] = 'picDesc1.gif';
    myDescImages[1] = 'picDesc2.gif';


    You might also want to preload the images so that when the mouseover occurs, it occurs seemingly instaneously.

    Hope this hasn't confused you totally When you get something up and buggy ( very little ever works the first time except for simple alerts) , post some code or a url and I/we will be glad to help.

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2000
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Vinny & co. Wasn't trying to ignore your kind reply, just too busy. Just an update to let you all know that I finally got something working. Hooray!!!

    http://www.clearquest.net/firestorm/...ndexmouse.html

    Now 2 problems that aren't JS related, but I could still use some help as I don't have a ton of time to troubleshoot.

    1) The side nav images on the left aren't lining up. I've noticed this in HTML.... all the coding is the same, and it's not gaps in the images, but some of the images have bigger gaps in between them then others. Notice how the bottom three are really close to each other, with hardly any space between them... well the top few have large gaps between them, even though the coding is the same. Not only is it ugly, but it creates some problems with the rollover since if someone tries to roll from one "nav section" to the other, the "welcome" image comes back since it doesn't think the mouse is over any particular image.

    Wow, that was long!!! Okay, any ideas how to fix that??? Thanks!

    2) In NS, the "description" image isn't aligned to the far right. I've tried to align it right with div's, IMG aligns, and P's, but nothing has worked. How can I get that image on the far right in NS like it is in IE?

    Thanks again so much!!!
    -Falco

  5. #5
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Falco,

    Glad you got it up.

    Re:
    Now 2 problems...as I don't have a ton of time to troubleshoot.
    Ditto.

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2000
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it fixed at another forum Vinny, no prob.


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
  •