SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <TD> 's and the "hover" property

    I have this bit of code:

    <TR WIDTH="247" BGCOLOR="#BFBFBF">
    <TD WIDTH="10">
    <IMG SRC="../media/blank_pic.gif">
    </TD>
    <TD WIDTH="5"></TD>
    <TD ALIGN="LEFT">
    <A CLASS="order" HREF="./merchant.mv?blab=bla"

    onMouseover="document.h.src = './blue-arrow.gif'"
    onMouseout="document.h.src='./blank_pic.gif'">


    Link Text bla bla bla
    </A>
    </TD>
    </TR>

    This is just one table row in a long table. You can view the table HERE. (Left side.)
    There are three cells in a row here: first cell holds the images for the onMouseout/onMouseover JavaScript contained in the 3rd cell. Second cell is just a spacer cell.

    Can I do this rollover effect using CSS instead of JavaScript, and using text instead of images? When a person mouses over the 3rd cell, I want a bit of text to appear in the first cell instead of an img:

    onMouseover (hover)
    <FONT FACE="webdings" COLOR="navy">4</FONT>

    onMouseout (link)
    <FONT FACE="webdings" COLOR="#BFBFBF">4</FONT> (match the background color of the cell, or maybe I don't need anything to appear there at all? Can I do that

    Am I nuts or is this possible? (Don't answer the "am I nuts" part. I was just so informed.)

    Thanks for your help.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  2. #2
    SitePoint Member
    Join Date
    Dec 2002
    Location
    Toronto, Ontario
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know if this will help you and give you exactly what you want, but you can combine JavaScript with CSS to produce the result you want. Because you're editing a section of code outside of the <A></A> tags, you'd require a javascript to alternate between your blue 4 and your grey 4, setting each 4 to be grey in its own CSS class by default.

    e.g. <FONT CLASS="class1">4</FONT>

    where your foreground colour of class1 (and all class objects) is set to #BFBFBF.

    It can, however, be done. Basically what you want to do is call a function onMouseOver and onMouseOut to edit the appropriate section of code. I've provided one version of a function below.

    var DHTML = (document.getElementById || document.all || document.layers);

    function getObj(name)
    // Determine browser type
    {
    if (document.getElementById)
    {
    this.obj = document.getElementById(name);
    this.style = document.getElementById(name).style;
    }
    else if (document.all)
    {
    this.obj = document.all[name];
    this.style = document.all[name].style;
    }
    else if (document.layers)
    {
    this.obj = document.layers[name];
    this.style = document.layers[name];
    }
    }

    function MainMenu (colour1, onoff1){
    if (!DHTML) return;
    var x = new getObj(colour1);
    if (onoff1==1) {
    x.style.Color="navy";
    } else {
    x.style.Color="#BFBFBF";
    }
    }

    To deconstruct this a little bit, MainMenu takes the CSS class colour1 you'd pass to it from your onMouseOver and alters it accordingly.

    e.g. <A HREF="link.htm" onMouseOver="MainMenu('class1',1)" onMouseOut="MainMenu('class1',0)text for link</A> would change the foreground colour of the class mentioned above to navy onMouseOver and to #BFBFBF onMouseOut, regardless of where it is positioned in the document. All you have to do is assign a different class to each 4 in your document (if you assign 2 or more 4s the same class, both of them will switch onMouseOvers and onMouseOuts.)

  3. #3
    SitePoint Member
    Join Date
    Dec 2002
    Location
    Toronto, Ontario
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Correction.

    The part
    onMouseOut="MainMenu('class1',0)text for link</A>

    Should read
    onMouseOut="MainMenu('class1',0)">text for link</A>

    Sorry about that. It's 2 AM.

  4. #4
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There some info on "pure css popups" Here: http://www.meyerweb.com/eric/css/edge/popups/demo.html.

    Sounds like you may be trying to do something similar.

  5. #5
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there i'd really like to read this about the pure css popups but i keep on getting an 'error 404'...
    ...anywhere else i can read about this?
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  6. #6
    The Legend Indian's Avatar
    Join Date
    Nov 2001
    Location
    Gods' Own Country
    Posts
    890
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a 'dot'(.) after the URL in that link. That is why you get 404.

    http://www.meyerweb.com/eric/css/edge/popups/demo.html
    Death --the last sleep? No, it is the final awakening.

    TinyPlanet.org
    Discuss and Debate World Events, Politics and Religion

  7. #7
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks guys...

    Thank you all for your help, Indian and theGAME1264. The code is great and I'll check out the link.
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."



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
  •