easiest way to have a rollover image?

Discussion in 'HTML & Website Design' started by shamrock36, Aug 27, 2006.

0
  1. #1
    hello,
    what's the easiest way to make a rollover image in my site?
    better if it would be preloaded I guess,

    thanks
     
    shamrock36, Aug 27, 2006 IP
  2. fscripting

    fscripting Banned

    Messages:
    288
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    javascript is the best for doin this
     
    fscripting, Aug 27, 2006 IP
  3. ahkip

    ahkip Prominent Member

    Messages:
    9,205
    Likes Received:
    647
    Best Answers:
    0
    Trophy Points:
    310
    #3
    ahkip, Aug 27, 2006 IP
    Smyrl likes this.
  4. unlisted80

    unlisted80 Peon

    Messages:
    644
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #4
    dreamweaver do it all...
     
    unlisted80, Aug 27, 2006 IP
  5. void

    void Peon

    Messages:
    119
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #5
    CSS rollovers negate the need for using preloading. Use one image which has the normal and rollover states, and change the coords for hover. This needs a div or table though. I'll dig some code out if necessary, haven't used this for months. I'm sure there'll be a decent explanation on google somewhere though :)
     
    void, Aug 27, 2006 IP
    ahkip likes this.
  6. 330td

    330td Well-Known Member

    Messages:
    855
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    135
    #6
    Yeah using one image rollover is the best for dial-up.

    I have a tutorial about this in french but google can help you to translate it ;)

    TUTORIAL

    DEMO
     
    330td, Aug 27, 2006 IP
  7. Mano70

    Mano70 Peon

    Messages:
    42
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Or just look at http://wellstyled.com/css-nopreload-rollovers.html

    Also posted some solution based on this in another thread:
    http://forums.digitalpoint.com/showpost.php?p=1313113&postcount=4

    For you the javascript solution will be the easist I guess since you ask, but personally I would go for the CSS solution.
     
    Mano70, Aug 27, 2006 IP
    ahkip likes this.
  8. sojic

    sojic Active Member

    Messages:
    133
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    90
    #8
    The best solution is CSS. Why?

    1. It is more easy then javaScript.
    2. You do not need preloader
    3. The code is more clear, readable, SEO
    4. Many surfers do not alow javascripts.
     
    sojic, Aug 27, 2006 IP
  9. shamrock36

    shamrock36 Active Member

    Messages:
    180
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    #9
    thanks for all the responses, but it all looks too complicated, I do use dreamweaver and just noticed it has this option - with only one line of code:

    <a href="1111" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','images/img_07.gif',1)"><img src="images/img_06.gif" name="Image11" width="50" height="19" border="0"></a>

    so isn't it the best option????
     
    shamrock36, Aug 29, 2006 IP
  10. void

    void Peon

    Messages:
    119
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Easiest for you to do, yeah. Can be a pig to maintain though.
     
    void, Aug 29, 2006 IP
  11. sojic

    sojic Active Member

    Messages:
    133
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    90
    #11
    Easiest way is not always the best way.

    The code you have is to complicated for reading, the site will not be SEO... but it will work :)
     
    sojic, Sep 1, 2006 IP
  12. ketan9

    ketan9 Active Member

    Messages:
    548
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #12
    Just google for CSS rollovers and you would find something that you need. Do not try javascript roll overs, it is an additional overhead which you simply avoid by using css rollovers, so stick with css.
     
    ketan9, Sep 2, 2006 IP