SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Vancouver, Canada
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I got a simple rollover with a little twist to itÖ and I have a little glitch

    UPDATED

    Hi,

    Maybe someone can tell me what the problem is because I sure canít figure it out.

    I got a simple rollover with a little twist to itÖ and I have a little glitch.

    The two only images that I am trying to get to swap are:

    Button_on.jpg
    Button_off.gif

    Thatís it. And itís the same images for all 5 links

    This means that Ö

    all 5 links should start with button_off.gif. And any of the 5 links should swap to button_on.jpg when I get my mouse over it--while all others remain with button_off.gif.


    The rollover works, but the only image that swap is on link #5. That is whether I bring my mouse to link #1 or link#2 or any other link. The only image that keeps swapping is link #5.

    Check it out and try moving your pointer over the links and youíll understand

    MY TEMPLATE

    Afterward, Iíll add text links above these rollovers using CSS.

    PS: is there a way to create a similar effect using CSS?

    Thanks

    Sheriff
    Last edited by SheriffG.Guirguis; Aug 16, 2002 at 19:24.

  2. #2
    SitePoint Zealot
    Join Date
    Jul 2002
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could look at this excellent tutorial:
    http://www.webreference.com/js/column1/
    or else browse this forum...

  3. #3
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Vancouver, Canada
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Guest

    I now created a rollover. I am trying to limit the amount of JavaScript for the search engines so I did it a little differently. It should work, but obviously I am making a mistake. I don't think I am far off though.

    If you know about rollovers, maybe you can tell me why I have the problem that I am describing above.

    I changed the original message. You may want to read it again.

    Thanks

    Sheriff

  4. #4
    SitePoint Addict been's Avatar
    Join Date
    May 2002
    Location
    Gent, Belgium
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The rollover works, but the only image that swap is on link #5. That is whether I bring my mouse to link #1 or link#2 or any other link. The only image that keeps swapping is link #5.
    I took a look at the page 'MY TEMPLATE':
    The problem is that all your images are named 'first' !
    You have to have different identifiers for the img-tags, like <img name="btn1"..., <img name="btn2" .... etc..
    PS: is there a way to create a similar effect using CSS?
    You could go by doing this in css with something like.
    Code:
    a.navigation
    {
        background: url("/pics/btn_normal.gif");
    }
    a.navigation:hover
    {
        background: url("/pics/btn_over.gif");
    }
    Per
    Everything
    works on a PowerPoint slide

  5. #5
    SitePoint Addict
    Join Date
    Dec 2001
    Location
    Vancouver, Canada
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi been,

    The CSS codes you provided looks like it does a similar effect as a JavaScript rollover--it swaps two images when you move your mouse pointer over the link.

    The only difference that I see is that you use a lot less codes with CSS which makes it more search engine friendly.

    So why is rollover with JavaScript so popular--more popular than CSS rollovers? Is there a catch I should know about?

    This looks almost too good to be true.

    Sheriff

  6. #6
    SitePoint Addict been's Avatar
    Join Date
    May 2002
    Location
    Gent, Belgium
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you need a recent version of your browser for the CSS to work (don't know by heart which browser versions support the CSS thing).

    Also, I think a lot of people just copy-paste the functions that programs like Photoshop, fireworx, and the like, generate.

    So if you need rollovers and your site must be as compatible as can be with different browsers/os, go for the JavaScript roll-overs, otherwise I should opt for the CSS solution (much prettier imho ;-) )
    Per
    Everything
    works on a PowerPoint slide


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
  •