SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Image swap help

  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image swap help

    I am looking to find a javascript that image swaps 4 button images that are to be used as links.

    There will be an unvisited button (color of my choice)

    There will be a hover state which Is green.

    There will be a visited link button that is purple.

    There will be a currently active page button that will be red.

    I have a script that works for 3 of the for states.
    The script that I have also will not keep the purple, visited state, as standard text based links will when a page has allready been visited.
    Does anyone have a script that will work for what I want to do for all states.

    I don't know how to build a script of my own, but plan on learning.

    Does anyone have a script that will work for what I want to do for all 4 link/swap states that I want incorporated?


    Thanks,
    Palzo

  2. #2
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you considered using CSS rather than Javascript for this?

    i.e. http://www.peachpit.com/articles/art...?p=447210&rl=1

  3. #3
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css not an option for me in this case

    I have used Css rollovers in the past, but my experience using negative numbers for alignment or anything else has not been a good one since
    many browsers don't like them.

    I have talked with many who say that for what I want to do it is beyond the limits of Xhtml and css.

    I do appreciate your insight and help though.

    The link below to my mid-term project shows you what I have currently.
    My original message for help explains the problems that I am having.
    http://www.wvcweb.com/jeff/ecogliand...position2.html
    Thanks

  4. #4
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Palzo View Post
    I have used Css rollovers in the past, but my experience using negative numbers for alignment or anything else has not been a good one since many browsers don't like them.
    AFAIK all major browsers support the technique. Perhaps it was the implementation?

    Quote Originally Posted by Palzo View Post
    I have talked with many who say that for what I want to do it is beyond the limits of Xhtml and css.
    Interesting, since from what you have explained it seems perfectly suited to CSS. In fact I have done precisely what you explained on a number of occasions.

    The added advantage is that it would reduce the amount of markup by (looking at the source code) 2/3rds...

    I admit that there would be a little work involved to get it to work with the number of items you are dealing with. But this could also be offset if you were prepared to use text overlaying the buttons rather than as part of the image. That way you would only have one small image containing the four states.

  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css

    I tried to get it to work with Css a year ago. 2 States was easy, but 4, no matter what I tried I couldn't get it to work. I tried using pseudo classes.
    my teacher told me not to use pseudo classes because of cross browser compatability.

    Negative margins are what I was having troubles with because they would work, but my page would render differently in different browsers.

    The link to the article you gave me was a good one, but maybe I am misreading the result as I could have sworn that I tried this same technique a year ago.
    Does the result render like the buttons on my midterm page or do the different states appear vertically offset from one another on the page?

    Thanks

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your teacher doesn't sound like much of an authority if they're telling you not to use pseudo-classes. All the browsers you need to care about support them on anchors, and all of them except IE6 support them on everything else. Since you're using links (anchors) you can use pseudo-classes.

    Code CSS:
    #linklist a {
      float:left;
      height:40px;
      width:100px;
    }
    #linklist a:link {
      background:#CCC url(white.png) no-repeat; /* unvisited link */
    }
    #linklist a:visited {
      background:#707 url(purple.png) no-repeat;
    }
    #linklist a:link:hover,
    #linklist a:visited:hover {
      background:#0F0 url(green.png) no-repeat;
    }
    #linklist a.active { /* currently active page */
      background:#F00 url(red.png) no-repeat;
    }
    #linklist a span {display:none}
    HTML Code:
    <p id="linklist">
    <a href="http://www.altavista.com"><span>LINK</span></a>
    <a href="http://www.msn.com"><span>LINK</span></a>
    <a href="http://www.dogpile.com"><span>LINK</span></a>
    <a href="http://www.telegraph.co.uk"><span>LINK</span></a>
    </p>
    Visited links keep their background colour, in IE6 and Firefox (and therefore almost certainly in every other major browser). Now you just need to add your image URLs instead. Don't use IMG tags inside the links, instead use background images like I have done above. And put your links in a list (UL). What I did above was quick and dirty, but it's semantically sensible for your links to use a list, as they are a list of links.

  7. #7
    Motivated Procrastinator seriocomic's Avatar
    Join Date
    Jan 2003
    Location
    Outside the bubble
    Posts
    1,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles method is one way, but it still loads four images and can give you a flickering effect when the browser loads them. I prefer the sprite method which would be one image containing the four buttons, either inline next to each other or stacked on top.

    Then using the background position property to dictate which button would be shown (for buttons inline on a single image):

    Code CSS:
    #linklist a {
      float:left;
      height:40px;
      width:100px;
    }
    #linklist a:link {
      background:#CCC url(buttons.png) 0 0 no-repeat; /*  where the 0 0 represent 'left' and 'top respectively*/
    }
    #linklist a:visited {
      background:#707 url(buttons.png) -100px 0 no-repeat;
    }
    #linklist a:hover {
      background:#0F0 url(buttons.png) -200px 0 no-repeat;
    }
    #linklist a.active,
    body#pagename #linklist a:link { /* currently active page */
      background:#F00 url(buttons.png) - 300px 0 no-repeat !important;
    }
    Again, thats a messy example not directly related to your page. But this technique works cross-browser.

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's a good idea. The fewer HTTP requests the better.


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
  •