www.webdeveloper.com
Results 1 to 4 of 4

Thread: SPAN to External Style Sheet: Help

  1. #1
    Join Date
    Nov 2005
    Location
    PRoM
    Posts
    376

    SPAN to External Style Sheet: Help

    I have several more of these but this is the gist of it...

    Code:
    <div class="top_row">
    <a class="ML" href="link.html"><SPAN onMouseOver="document.pic1.src='ML_over.gif'" onMouseOut="document.pic1.src='ML.gif'"><img name="pic1"></SPAN> MobsLaw</a>
    
    <a class="DnT" href="portfolio/PBBG's/PBBG_4_DnT_Interface.jpg"><SPAN class="DnT" onMouseOver="document.pic1.src='DnT_over.gif'" onMouseOut="document.pic1.src='DnT.gif'"><img src="bluepic1.gif" height="101" width="104" name="DnT"></SPAN>DnT</a>
    What I want to do it reduce the amount of code in the HTML and move it into the style sheet.

    Also, right now when I mouseOver the second image it changes the image from the first class (ML) line to the mouseOver image in the second class (DnT).

    I pulled the code from some website and I'm not even sure what the purpose of
    document.pic1.src
    is. Is that how it always needs to be, because I don't have that anywhere in my CSS or anything. It was just there from the site I used it from.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    here's a start:
    Code:
    <style type="text/css">
    a.ML {width:100px; height:15px; background:#fff url(ML.gif) no-repeat;} 
    a.ML:hover {background:#ccc url(ML_over.gif) no-repeat;} 
    </style>
    html:
    Code:
    <a class="ML" href="link.html">MobsLaw</a>

  3. #3
    Join Date
    Nov 2005
    Location
    PRoM
    Posts
    376
    That works.... except now the link text is visible again

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Code:
    a.ML {width:100px; height:15px; background:#fff url(ML.gif) no-repeat; text-indent: -999em;}

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles