Hi...I am having a confusing problem on this page:
<!-- m --><a class="postlink" href="http://www.thedarknightofthesoul.com/me_content.html">http://www.thedarknightofthesoul.com/me_content.html</a><!-- m -->
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!!!
TI'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=http://www.webdeveloper.com/forum/archive/index.php/"">Link</a>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=http://www.webdeveloper.com/forum/archive/index.php/"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!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.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...I FOUND IT!!!!
It's here, just in case anyone else should need this:
<!-- m --><a class="postlink" href="http://www.xs4all.nl/~ppk/js/mouseov.html">http://www.xs4all.nl/~ppk/js/mouseov.html</a><!-- m -->
This works PERFECTLY....
Thanks for all your help!
<!-- m --><a class="postlink" href="http://www.thedarknightofthesoul.com/me_content.html">http://www.thedarknightofthesoul.com/me_content.html</a><!-- m -->
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!!!
TI'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=http://www.webdeveloper.com/forum/archive/index.php/"">Link</a>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=http://www.webdeveloper.com/forum/archive/index.php/"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!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.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...I FOUND IT!!!!
It's here, just in case anyone else should need this:
<!-- m --><a class="postlink" href="http://www.xs4all.nl/~ppk/js/mouseov.html">http://www.xs4all.nl/~ppk/js/mouseov.html</a><!-- m -->
This works PERFECTLY....
Thanks for all your help!