www.webdeveloper.com
Results 1 to 11 of 11

Thread: Just trying to understand this better...

Hybrid View

  1. #1
    Join Date
    May 2003
    Location
    Milwaukee
    Posts
    347

    Just trying to understand this better...

    What I'd like to have happen with the code below is that on mouse over, the text appears in white, within a green box with a red border. Why doesn't this work? Like it says above...I am just trying to understand this better.

    Thanks guys.

    <html>
    <head>
    <style>
    a{color:#5892AD;}
    </style>

    <script type="text/javascript">
    function cursor(txt)
    {
    test.innerHTML=txt
    test.style.visibility="visible"
    test.style.position="absolute"
    test.style.color="white"
    test.style.border-width=1
    test.style.border-color="red"
    test.style.left=event.clientX+10
    test.style.top=event.clientY
    }

    function hidecursor()
    {
    test.style.visibility="hidden"
    }
    </script>

    </head>
    <body bgcolor="black">

    <a href="#" onmousemove="cursor('Text is white. Background for the text should be green, with a red border.')" onmouseout="hidecursor()">Mouse Over This</a><br />

    <span id="test" style="visibility:hidden">ignore me</span>

    </body>
    </html>

  2. #2
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,384
    Instead of the JavaScript (which will not be available/enabled by all users), just let CSS do the work:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang='en'>
    <head>
    <META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
    <title>Untitled</title>
    <style type="text/css">
    a {
      color: #5892AD;
      padding: 2px;
    }
    a:hover {
      padding: 1px;
      text-decoration: none;
      background-color: green;
      color: white;
      border: solid 1px red;
    }
    </style>
    </head>
    <body>
    <h1>This is a test.</h1>
    <p>This is a test. <a href="somepage.html">It is only a test.</a></p>
    <p>The end.</p>
    </body>
    </html>
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  3. #3
    Join Date
    May 2003
    Location
    Milwaukee
    Posts
    347
    Thanks for the reply NogDog, I appreciate it.

    It's okay if it's using JavaScript because this is for work (an IE only shop, unfortunately), and everyone's attributes are the same.

    What I want to have happen is have that text block appear next to the cursor when a user mouses over the link. It's the text block that I would like to have a colored background, not the link itself. I guess I'd like it to be a like a little "tip" box with the text I have in the top post.

    Another question...should I have posted this in DHTML? All of these different types of formatting and scripting seem to be pretty well intertwined...and I just wasn't sure where to post this. If it's in the wrong place, I apologize.

    Thanks,
    Tom
    Last edited by TomWeinstock; 01-27-2005 at 09:42 AM.

  4. #4
    Join Date
    May 2003
    Location
    Milwaukee
    Posts
    347
    Okay, I've got it working, except for the background color.

    Inside the red box, I would like it to be green. Do I have the syntax correct?

    <html>
    <head>
    <style>
    a{color:#5892AD;}
    </style>

    <script type="text/javascript">
    function cursor(txt)
    {
    test.innerHTML=txt;
    test.style.visibility="visible";
    test.style.position="absolute";
    test.style.border = "1px solid red";
    test.style.color="white";
    test.style.bgcolor="green";
    test.style.left=event.clientX+10;
    test.style.top=event.clientY;
    }

    function hidecursor()
    {
    test.style.visibility="hidden"
    }
    </script>

    </head>
    <body bgcolor="black">

    <a href="#" onmousemove="cursor('Text is white. Background should be green.')" onmouseout="hidecursor()">Mouse Over This</a><br />

    <span id="test" style="visibility:hidden">ignore me</span>

    </body>
    </html>

  5. #5
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,384
    Try "background-color".
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  6. #6
    Join Date
    May 2003
    Location
    Milwaukee
    Posts
    347
    Originally posted by NogDog
    Try "background-color".
    I get an error. "Line 29 - object expected"

  7. #7
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,384
    Looks like the JS property is "backgroundColor". (Caveat, my JS book is a few years old now.)
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  8. #8
    Join Date
    May 2003
    Location
    Milwaukee
    Posts
    347
    Originally posted by NogDog
    Looks like the JS property is "backgroundColor". (Caveat, my JS book is a few years old now.)
    excellent! It's working now. Thanks NogDog!!

  9. #9
    Join Date
    May 2003
    Location
    Milwaukee
    Posts
    347
    Is there somewhere online that I can see the different style attributes associated with JavaScript?

  10. #10
    Join Date
    May 2003
    Location
    Milwaukee
    Posts
    347
    Originally posted by TomWeinstock
    Is there somewhere online that I can see the different style attributes associated with JavaScript?
    Amazing what Google can do. LOL

    never mind the above request.

  11. #11
    Join Date
    Jan 2005
    Location
    Lithia Springs, GA USA
    Posts
    886
    You might also think about a couple of other options instead of javascript which I find to be much much easier.

    Use CSS to draw the boxes and control the colors with the a:hover as recommended by NogDog

    or

    if you are looking to use images, make an image with the different looks you want for the button all stacked on top of each other then have CSS 'move' the image if they mouse over it. I can explain further if you need.

    Just some suggestions for you to think about

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