1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Question about css

Discussion in 'CSS' started by NewComputer, Aug 15, 2004.

  1. #1
    Can I use it to clean up the following image over code:
    SEMrush
    <a href="http://www.newcomputer.ca" onMouseOver="MM_swapImage('Image1','','/Images/home_over1.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/Home.gif" alt="Return to the homepage of New Computer.ca with this button" name="Image1" width="91" height="31" border="0" id="Image1" ></a></td>
    <td><a href="http://www.newcomputer.ca/about_us.htm" onMouseOver="MM_swapImage('Image40','','/Images/about_us_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="/Images/about_us.gif" name="Image40" width="97" height="31" border="0"></a></td>
    <td><a href="http://www.newcomputer.ca/rates.htm" onMouseOver="MM_swapImage('Image4','','/Images/our_rates_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/our_rates.gif" alt="Return to the rates page of New Computer.ca with this button" name="Image4" width="119" height="31" border="0"></a></td>
    <td><a href="http://www.newcomputer.ca/specials.htm" onMouseOver="MM_swapImage('Image5','','/Images/our_specials_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/our_specials.gif" name="Image5" width="125" height="31" border="0" id="Image5" ></a></td>
    <td><a href="http://www.newcomputer.ca/upgrades.htm" onMouseOver="MM_swapImage('Image6','','/Images/pc_upgrades_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/pc_upgrades.gif" name="Image6" width="139" height="31" border="0" id="Image6" ></a></td>
    <td><a href="http://www.newcomputer.ca/purchases.htm" onMouseOver="MM_swapImage('Image7','','/Images/new_computer_purchase_over.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="Images/new_computer_purchase.gif" name="Image7" width="155" height="31" border="0" id="Image7" ></a>

    I would like to clean this code up using css, just wondering if it possible.
     
    NewComputer, Aug 15, 2004 IP
    SEMrush
  2. dazzlindonna

    dazzlindonna Peon

    Messages:
    553
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Sure, just do a google search for "css image rollover" without the quotes. You'll find plenty of ways to do it.
     
    dazzlindonna, Aug 15, 2004 IP
  3. Severus Maximus

    Severus Maximus Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    A simple rollover effect in css could be constructed as follows:

    link in the HTML:
    <a id=eml href="/e.htm" title="Email this page"></a>

    2 css rules:
    a#eml{width:38;height:30;background-image: url(/i/e.gif);}
    a:hover#eml{width:38;height:30;background-image: url(/i/eo.gif);

    short explanation:
    <a id=eml href="/e.htm" title="Email this page"></a>
    anchor with id "eml" refers to the html page e.htm, no problem so far.

    next you will need a css rule to show the email image without the mouseover
    a#eml{width:38;height:30;background-image: url(/i/e.gif);}
    this rule states thet all anchors with id "eml" reserve a space of 38 x 30 pixels and the image displayed in that space comes from the absolute url /i/e.gif (/i is the images folder and e is the image you wish to use.
    You can also write this rule as #eml a{width:38;height:30;background-image: url(/i/e.gif);}

    for the rollover
    a:hover#eml{width:38;height:30;background-image: url(/i/eo.gif);
    here all anchors with id "eml" in the "hover" state reserve a space of 38 x 30 pixels and the image displayed in that space comes from the absolute url /i/eo.gif (/i is the images folder and eo is the image you wish to use.
    You can also write this rule as #eml a:hover{width:38;height:30;background-image: url(/i/eo.gif);}

    NewComputer: one of your links :
    <a id="mhome" href="http://www.newcomputer.ca" title="Return to the homepage of New Computer.ca with this button" ></a>

    the external css would be:
    a#mhome{width:91;height:31;background-image: url(/Images/Home.gif);}
    a:hover#mhome{width:91;height:31;background-image: url(/Images/home_over1.gif);

    For the id you can use whatever you like but use something descriptive, I used mhome (menu home button)
    The width and height are obviously from the image and for the image url you should use the ABSOLUTE path to the image.

    Hope this helps you out, otherwise post your problem here or PM me.
     
    Severus Maximus, Aug 15, 2004 IP
  4. Severus Maximus

    Severus Maximus Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    The above code has a typo.
    Each css sentence should end with a }

    a:hover#eml{width:38;height:30;background-image: url(/i/eo.gif);
    Should be
    a:hover#eml{width:38;height:30;background-image: url(/i/eo.gif);}

    a:hover#mhome{width:91;height:31;background-image: url(/Images/home_over1.gif);
    Should be
    a:hover#mhome{width:91;height:31;background-image: url(/Images/home_over1.gif);}

    Just another copy paste typo.
     
    Severus Maximus, Aug 16, 2004 IP
  5. NewComputer

    NewComputer Well-Known Member

    Messages:
    2,021
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    188
    #5
    Thanks Sever,

    picked that up pretty quickly ;)
     
    NewComputer, Aug 16, 2004 IP