/    Sign up×
Community /Pin to ProfileBookmark

swap img problem

Copy linkTweet thisAlerts:
Feb 12.2005

I have a problem.

This is the site with a menu bar created by Fireworks. It uses a js script to create a drop down list and img swap with preloading of image.

[url]http://www.thunderyear.bravehost.com/wedding.html[/url]

Although it works fine with Mozilla and Netscape, there is an ugly pause before the img swaps when viewed in IE6.

Please help…

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@JPnycFeb 12.2005 — Doesn't seem so big a delay for me. Under a second, I'd say. It is noticeable but not what I'd call ugly. Code generators write rather convoluted overly complex code, so that could be responsible for the delay.
Copy linkTweet thisAlerts:
@eraserFeb 12.2005 — create the menu entries using transparent gif if you'd like to stick to some particular fonts. Replace the image swapping with CSS. ie.

a.button:link {...}

a.button:visited {...}

a.button:hover {...}

a.button:active{...}

It can easily generate the same effects.
Copy linkTweet thisAlerts:
@exprexionauthorFeb 13.2005 — It looks pretty bad to me. On IE6 that is.

Is there an easy to understand tutorial on CSS menu? I have another one with some bugs with the text color actually, this is a jscript+css I adapted somewhere :

http://www.thunderyear.bravehost.com/securitie.HTML

The opacity works only on IE.

Yet the thing with CSS is that I cannot make it fit into the layout flawlessly as it depends on the browser viewing it, unlike slicing img. eg in a tight layout like below, it has a similar delay with its swap:

http://www.thunderyear.bravehost.com/cvs.html

using <div id=> to position the menu bar is risky when alignment is neccessary.
Copy linkTweet thisAlerts:
@exprexionauthorFeb 15.2005 — Thanks for the site, it looks good.

I've used a least convoluted js for mouseover, yet the pause is still there in IE only. Guess I should stick to CSS.

<script>

contactOFF = new Image()

contactOFF.src="contactOFF.jpg"

contactON = new Image()

contactON.src="contactON.jpg"

function rollOver (imgName)

{

document.images[imgName].src = eval('imgName + "ON.jpg"')

}

function rollOut (imgName)

{

document.images[imgName].src = eval('imgName + "OFF.jpg"')

}

</script>

<body>

<a href="#" onMouseOut="javascript:rollOut('contact')" onMouseOver="javascript:rollOver('contact')"><img name="contact" src="contactOFF.jpg"></a>

</body>
Copy linkTweet thisAlerts:
@David_HarrisonFeb 15.2005 — [i]Originally posted by exprexion [/i]

[B]Guess I should stick to CSS.[/QUOTE]Good idea:



[upl-file uuid=23e2b75c-aab0-434b-940c-4058b538bdfd size=16kB]cssimagerollover.zip[/upl-file]
Copy linkTweet thisAlerts:
@exprexionauthorFeb 17.2005 — Thanks all.
×

Success!

Help @exprexion 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.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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