www.webdeveloper.com
Results 1 to 6 of 6

Thread: css placement / jscript rollovers? help!!

  1. #1
    Join Date
    Jan 2003
    Posts
    46

    css placement / jscript rollovers? help!!

    Hi...I am having a confusing problem on this page:

    http://www.thedarknightofthesoul.com/me_content.html

    I'm *attempting* to lay out the whole page without using tables to do so, by just using CSS placement. But the problem is, when I try to use my javascript rollovers for my buttons, the script doesn't work!

    What is the correct way to display precisely positioned rollover buttons, and have your javascript still intact?? Please keep in mind I'm VERY new at this!!!

    T

  2. #2
    Join Date
    Nov 2002
    Posts
    984
    I'm *attempting* to lay out the whole page without using tables to do so, by just using CSS placement. But the problem is, when I try to use my javascript rollovers for my buttons, the script doesn't work!
    Generally, the exact same JavaScript that you use on a table based webpage will work the same without tables.

    However when I such simple things as "rollovers" I usually do it without using JavaScript at all.

    Eg something like this will work in v5+ browsers even if Javascript is not available

    a:link {background: url(img.png)}
    a:hover {background: url(img2.png)}
    </style>
    </head>
    <body>
    <p>
    <a href="">Link</a>
    // Stefan Huszics

  3. #3
    Join Date
    Jan 2003
    Posts
    46
    Ok...
    this is what I'm doing:

    a.m2:link {background: url(images.jpg)}
    a.m2:hover {background: url(imagesA.jpg)}
    a.m2:active {background: url(imagesA.jpg)}
    a.m2:visited {background: url(images.jpg)}
    </head>

    (a class="m2" href="me.html")(img border=0 src="images/me/m2.jpg" alt="me" style="position:absolute; top: 66px; left: 219px; width:30px; height:24px;") (/a)

    (with < style brackets, of course...)

    and it isn't doing anything!

  4. #4
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by maubast
    Ok...
    this is what I'm doing:

    and it isn't doing anything!
    style="position:absolute; top: 66px; left: 219px; width:30px; height:24px;")

    This means that you are leaving the <a> to have no content. It's hard to hover above somthing that is so small it isn't visable.
    You need to position the entire <a> not just the image.

    However, if you are using images as the links you have another problem too. You are placing an image above the background, thus you don't see the changes in the background becuse your image is covering it up.

    The possible solutuions I can think of right now are
    * Use text instead of images.
    * Use an image with transparent sections through which the background shines through.
    * Use JavaScript to switch the scr of the <img> to switch between the images.
    // Stefan Huszics

  5. #5
    Join Date
    Jan 2003
    Posts
    46
    I'm trying to use a jscript to switch the source, but the problem is that there seems to be a conflict somewhere between the javascript and the div layer. I've tried adding the positioning CSS directly to the img src itself, and that doesn't work either.

    I've been looking on the internet all day, and it's amazing how little information there is regarding this topic!

    Thanks for your help...

  6. #6
    Join Date
    Jan 2003
    Posts
    46
    I FOUND IT!!!!

    It's here, just in case anyone else should need this:
    http://www.xs4all.nl/~ppk/js/mouseov.html

    This works PERFECTLY....

    Thanks for all your help!

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