How to change this code from html to css style?

Discussion in 'CSS' started by bass, May 6, 2009.

  1. #1
    <img src="http://www.xxx.com/themes/blue/shop.jpg" alt="xxx.com" width="950" height="152" border="0" usemap="#Map" longdesc="http://www.xxx.com/" />
    <map name="Map" id="Map"><area shape="rect" coords="47,18,303,121" href="http://www.xxx.com/" /></map>
    Code (markup):
    I want to put it in style.css.

    Current it put on index file with html code.
     
    bass, May 6, 2009 IP
  2. ffb

    ffb Active Member

    Messages:
    79
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    75
    #2
    Other than making all image borders zero, I don't think there's anything else you could really add to the stylesheet.
     
    ffb, May 6, 2009 IP
  3. bass

    bass Active Member

    Messages:
    738
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    How to write it?
     
    bass, May 6, 2009 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    img {
    border: 0;
    }

    If you had a better understanding of CSS (which takes time) you could just use plain old image replacement and get rid of the nasty image map.

    Like this or this menu using this image.


    You're also using the alt and longdesc wrong. It should just say if there's any text in that image, otherwise, leave the url out. If there's a link, the link will be read out, and if you absolutely need the url to appear on mouseover, use "title" in the anchor.
     
    Stomme poes, May 7, 2009 IP
  5. bass

    bass Active Member

    Messages:
    738
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #5
    I don't understand

    img {
    border: 0;
    }

    I want link to my site when I hover on any banner position.

    This is my style.css header

    Is it must add any code?
     
    bass, May 7, 2009 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Sorry, you weren't clear-- I thought you were taking that HTML you posted in your first post, and wanted to move the inline styling (like "border=0") out of the HTML and into the CSS stylesheet.

    If it's one image, you don't need an image map. But usually for banners you do need the image in the HTML, not the stylesheet, with an anchor linking to your site wrapped around it.

    There IS a way to make the image a background image instead but I don't really see the point.

    So, what's wrong with:
    
    <a href="YOUR URL HERE"><img src="http://www.xxx.com/themes/blue/shop.jpg" alt="SHOP" width="950" height="152" /></a>
    
    Code (markup):
    That's pretty typical banner HTML. The clickable area is wrapping the image. If someone's mouse sits over that image, the mouse becomes a hand and they know they can click it.
     
    Stomme poes, May 8, 2009 IP