/    Sign up×
Community /Pin to ProfileBookmark

my mouseover images are sluggish!

Copy linkTweet thisAlerts:
Mar 27.2004

i’m creating some images that respond to mouseovers…they seem pretty darn slow to me…this is my code:

<IMG SRC=”images/edit_content_off.gif” onmouseover=”this.src=’images/edit_content_on.gif’;” onmouseout=”this.src=’images/edit_content_off.gif’;”>

i’m guessing that creating some image() objects in javascript might be the way to go but before i start reprogramming my whole project, i’d like to know if this is true…and possibly what a good approach might be.

to post a comment
JavaScript

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@buntineMar 27.2004 — Yes, it would be wise to preload your images so the image swapping process is faster.

The basic syntax is as follows:
<i>
</i>var pic1 = new Image([i]width[/i], [i]height[/i]);
pic1.src = "/subDir/image.gif"

The 'height' and 'width' parameters are optional.

Regards,

Andrew Buntine.
Copy linkTweet thisAlerts:
@David_HarrisonMar 28.2004 — I assume that your image is also a link, if it isn't then just ignore this.

If you give the link the same dimentions as the image then what you can do is stitch your images together and simply move them when the user hovers over a link. I have uploaded an example of this effect in action.

Since the image is moved there is no waiting for another image to load or including lots of JavaScript to preload images. In fact there is no JavaScript here at all.

[upl-file uuid=26b136d4-48ea-4433-b0a2-0789c8e19043 size=1kB]css image rollover.zip[/upl-file]
Copy linkTweet thisAlerts:
@sneakyimpauthorMar 29.2004 — brilliant! i think i understand...thanks SO MUCH for the sample.
Copy linkTweet thisAlerts:
@fredmvMar 29.2004 — Why did you [url=http://forums.webdeveloper.com/showthread.php?s=&postid=168159]cross-post[/url]?
Copy linkTweet thisAlerts:
@sneakyimpauthorMar 29.2004 — My apologies, Fred. I wasn't sure if the question was DHTML or Javascript. I thought I would post both just to be safe. It won't happen again. Should I have the two posts reference each other or perhaps add the information from one to the other and delete one? please advise.
Copy linkTweet thisAlerts:
@fredmvMar 29.2004 — No problem whatsoever. I was just letting you know because I figured you might not be aware that cross-posting generally isn't recommended. Though your point of not being sure if it was DHTML or JavaScript, however, brings up an interesting point.

I personally think the forums shouldn't have a DHTML as well as a JavaScript forum because as demonstrated here, all it tends to do is confuse members. DHTML is actually an old term for proprietary, IE-only JavaScript or as a way to describe the mixing of JavaScript and CSS along with markup.

Point being, JavaScript would be a perfect place to discuss any of this and the DHTML forum just kind of gets in the way. If you have any questions similar to this in the future, it'd probably be smarter to ask in the JavaScript section because you'll probably get a better answer and have a better chance of getting answered. Simply because, some developers and users alike are confused on what the term actually means.

As for your question about what to do about the two threads, I'll just leave them be. It won't really do any harm, I suppose, and at the very least the question was handled properly and therefore answered.
Copy linkTweet thisAlerts:
@David_HarrisonMar 29.2004 — I think that it would be better if all threads that got posted in the JavaScript forum but belong in the DHTML should just be moved here.

It would filter some of the traffic away from the JavaScript worum which is getting a little crowded. I have seen people complaining that their new threads soon get pushed off the page.

Once the thread count in the DHTML forum rises a bit more then it would be prefereable for members to post their question in that forum.

The only definition of DHTML I've know is the meshing of (X)HTML, CSS and JavaScript. I've never heard of DHTML being referred to as IE-only JavaScript before.

I definately don't think that the DHTML forum should be deleted (although I may be slightly biased here).
Copy linkTweet thisAlerts:
@buntineMar 29.2004 — Personally, i would say it was a mixture of JavaScript, CSS and DOM.

Fred, what did you mean by 'IE-only JavaScript'?

Regards.
Copy linkTweet thisAlerts:
@fredmvMar 29.2004 — Well, I didn't only say that:[i]Originally posted by fredmv[/i]

[b]DHTML is actually an old term for proprietary, IE-only JavaScript or as a way to describe the mixing of JavaScript and CSS along with markup. [/b][/quote]This is what I was referring to in the first part: http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp.

However, traditionally, DHTML is just what you guys (and myself) have said &#8212; simply a mix of JavaScript and CSS as well as markup to produce dynamic HTML hence DHTML.

The thing is, virtually any DHTML thread is a valid JavaScript thread thus rendering this section pointless. Obviously, this isn't up to me, which is why I'd like everyone's opinons on this.
Copy linkTweet thisAlerts:
@steelersfan88Mar 29.2004 — Looks like vladdy might be for this idea, while the rest of us [might not be]: [URL=http://forums.webdeveloper.com/showthread.php?s=&threadid=29726&perpage=15&pagenumber=1]thread here[/URL] ?
×

Success!

Help @sneakyimp 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.27,
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,
)...