SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Switzerland
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Change CSS text with mouseover on image?

    I'm trying to do this:
    I've got a series of buttons as .gif images. Under these buttons there are small single-word descriptions, as CSS text. Is there a way to pass with the mouse over the image and - while doing this - make bold, change the color or highlight the text below the image? I know it would be simpler just to get rid of the CSS text and insert it into the gif image (a simple rollover effect), but I believe a text effect would be nicer...

    Any help would be greatly appreciated!

  2. #2
    SitePoint Guru quenting's Avatar
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    735
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    maybe try something like this (using css only).

    Code:
    style:
    #rollover a span { color:#039; }
    #rollover a:hover span { color:#000; font-weight:bold; }
    
    html:
    <div id="rollover">
      <a href="whatever.html">
        <img src="yourimage.gif" alt="" />
        <span>your text here</span>
      </a>
    </div>
    Quentin

  3. #3
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Switzerland
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, quentin: it worked!
    But I've got another question: I'm using an external CSS file and using your script all the links are underlined. I know that I can turn the underline off using text-decoration : none; but I don't know what is the correct syntax to put it on an external CSS file.

    #rollover a span { font-family: "Trebuchet MS", "Lucida Grande", Verdana, Geneva, sans-serif;
    font-size: 11px;
    color: #999999;
    text-decoration: none;
    font-weight: bold; }

    Does not work...

    Thanks!


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
  •