HTML marquee Options

[Urban]

Hi,

Im new to this forum...really need help.

I was trying to make the icons on my html to bounce on mouseover/click. One way wouldve to use javascript. But i figured that a shorter ( but obviously not as gud) way would be to make it 'alternate' marquee vertically in a loop for say abt 3 times, so that it looks like it boucing.

Heres the problem. The above concept does seem to work, except for the fact that all my icons would start their marquee as i open my page. I only want them to start their marquee when i get my mouse over them.
So how do i open my page with all my marquee stopped, and begin only when i mouseover/click on them?

thx

[pandy]

I don't know if you can, but are you aware that MARQUEE is an old IE tag that isn't supported by all browser? For mysterious reasons some browsers have added support for it in later years, but far from all.

[Urban]

umm...it works in my chrome (version:8.0.552.200 beta)...so i guess itll work in most of them...anyways, i am not building a commercial site that has to be hosted....
...so any1 has a solution?

[Urban]

Hi,

i was trying to use this code:

<marquee width=63 onmouseover="this.width=66" onmouseout="this.width=63" behavior="alternate">

But this seems to be working only in IE not in chrome/firefox etc.

Chrome/firefox accepted the script: onmouseover="this.stop()" but not the above stated ones.
Could any1 plz give me an alternate way of achieving this plz? is there any way i can change the width of the marquee as mouse comes over it?

desperate

[pandy]

So it does matter now?

I don't know. Gecko seems to accept width if you use CSS, but it doesn't let you change it dynamically even if you let JS manipulate the style object. That's what I found when trying it now. Doubt there is a reference anywhere for this.

[Urban]

hehe..yea i guess it does matter now

would u know any way to do this plz?

onmouseover="functionA()"

<script>
function functionA {
marquee.width=66
}
</script>

i know this is wrong...but i dont know much javascript....could u make something like this to make the width change on mousover?...
or is there any way i can use "onLoad" to make my marquee start at the stopped position....
plz plz help...getting crazy now

[pandy]

It won't change anything to put it in a function.

[Urban]

so is there any way to do this???

ppl plz help :'(
*sob*

[wgabrie]

You could create a second, animated GIF of each icon.

If the icons are background images you could use CSS's psudo-class ":hover" to change the background image to the animated version.

If the icons are "img" tags, You might be able to use Javascript to change the src attribute. Later versions of CSS 2, 3, + also have a content property, but its only been supported by newer browsers 1-3 years old, and it's only intended for use with the ":before" and ":after" pseudo-elements. Or, on a list.

Additionally, You could probably use either Javascript or CSS to change the image's position relative to its origin, though if it is a great change (and the script reads the image instead of a parent element whose position doesn't change) the image might end up registering as "off" returning it to its original position where it would once again be registered as "on" leading to annoying, seizure inducing flashes back and forth several times a second.

This post has been edited by wgabrie: Nov 13 2010, 02:05 PM

[pandy]

You are probably pretty alone in wanting to use MARQEE today. No one uses it, so no one knows much about it. And as said, finding info about non-MS browsers' implementations would be hard.

[Urban]

@wgabrie thx for the reply
so ur soln would be to either create an animated GIF out of each icon and make the src of the image change as i hover, OR i somehow use javascript to change their position relative to the origin..
Ill try this out, though im pretty sure i cant do the 'change position using script' soln....thx a lot anyways.

@pandy..i really have no inclination towards marquee, but using it was (until now) a somple solution to create my icons bounce on hover. I did find one code on this, but that was pretty huge and complex ( atleast for me) using script. I thought using marque would be simple, if only i could somehow not have my marquee start on page load , then everything would be fine ..thx anyways

If any1 else has a better solution, plz do post

[wgabrie]

Of course you can change the position with Javascript.

Javascript can use what is called HTML DOM to manipulate the web page.

In this instance I would consider using HTML DOM/Javascript's Style object (specifically: position, top, bottom, left, right) along with my knowledge of CSS's Relative Positioning to change the position of your icon.

The other thing you'd need when using Javascript is some sort of timing script to change the value over time. Also, see: Javascript Animation

This post has been edited by wgabrie: Nov 13 2010, 09:26 PM

[pandy]

He wants to change the width and gecko won't allow it. Not that I know how that would make i look like the text bounces.

[Urban]

well...by changing width this is what i was gng to do:

Initial width of marquee= width of icon --implies, even though marquee WILL start on page load, it look like the icon is perfectly static.

Behavior of marquee= alternate

on mouse over change width to say abt 10 pixels and keep speed of marquee as u want it to be. This would make the icon start 'bouncing' between its two end points-- hence giving a perfectly normal bounce effect

..anyways, any new ideas are most welcome...if any1 has another way of getting the bounce effect, plz do post