/    Sign up×
Community /Pin to ProfileBookmark

css placement / jscript rollovers? help!!

Copy linkTweet thisAlerts:
Jan 24.2003

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

[url]http://www.thedarknightofthesoul.com/me_content.html[/url]

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

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@StefanJan 24.2003 —  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! [/QUOTE]

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>
Copy linkTweet thisAlerts:
@maubastauthorJan 24.2003 — 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!
Copy linkTweet thisAlerts:
@StefanJan 24.2003 — [i]Originally posted by maubast [/i]

[B]Ok...

this is what I'm doing:



and it isn't doing anything! [/B][/QUOTE]

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.
Copy linkTweet thisAlerts:
@maubastauthorJan 24.2003 — 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...
Copy linkTweet thisAlerts:
@maubastauthorJan 24.2003 — 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!
×

Success!

Help @maubast spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...