Topic: Text Rollover without flicker Pages that link to <a href="https://ozoneasylum.com/backlink?for=28243" title="Pages that link to Topic: Text Rollover without flicker" rel="nofollow" >Topic: Text Rollover without flicker\
 
Author Thread
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-21-2006 21:12 Edit Quote

I'm trying to do something very simple but without any luck: have an image appear when text is rolled-over.

I got it to work with mouseover but the flicker was giving me seizures. I saw several examples of CSS implementations but all used a background image, preloaded or not...i want to use simple text without any background image.

can anyone provide a snippet or link?
Thanks
(yes i've searched the asylum and google as well to no avail).


edit: image would disappear on mouseout.

(Edited by SleepingWolf on 07-21-2006 21:13)
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 IP logged posted posted 07-21-2006 22:21 Edit Quote

then you can use the Doc's Javascipt Rollover

http://www.handson.nu/CODING/javascript.shtml

Later,

C:\
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-21-2006 22:32 Edit Quote

Hi CPrompt and Thanks

If i'm reading Doc's script right, it is for swapping images where an existing image exists.

I want to rollover a text link without any initial image. I'm sure this code could be modified to use a transparent.gif (i.e invisible) but you still have the flicker associated with mouseovers..no?

edit: nevermind..i figured out how to do it.


(Edited by SleepingWolf on 07-21-2006 23:45)
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 07-22-2006 01:21 Edit Quote

You could also do:

code:
#idOfYourTextOrAnyOtherCssSelector
{
     background:url(yourImage.png) no-repeat 200000px 0px;
}
#idOfYourTextOrAnyOtherCssSelector:hover
{
    background-position:top left;
}

and voilà.

I don't want to diss Doc's code, but it says copyright 1998 in his script. Doing rollover via image swapping is a thing of the past. Now CSS-only technique is well known and documented. There is no need to resort to JavaScript for a simple rollover.

Hope that helps,
Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

 IP logged posted posted 07-22-2006 02:18 Edit Quote

Except I think that SleepingWolf's case here is that he wants the image to appear *somewhere else*, possibly in a completely different part of the page, when he hovers over the link, not in the link's background. CSS just won't work for that, but the Doc's code can be adapted for it.


Justice 4 Pat Richard

(Edited by Skaarjj on 07-22-2006 02:19)
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-22-2006 03:06 Edit Quote

Skaarjj has it right. I have good news and bad news.
The good news: the code below does exactly what i want to do.
The bad news: the image is supposed to open on top of a flash movie - but if memory serves me right, that isn't possible is it? to have an image rollover a flash movie?

Btw, what i'm trying to do is have a "help screen", a screenshot with notations, layered on top of the flash movie. the help screen would explain the navigation. it would be activated by a mouseover on a help link in the top menu bar. I guess I'll have to do this in Flash

http://www.sleepingwolves.com/gallery/gallery.html


code:
<script type="text/javascript">
function toggle(o)
{
   var div=document.getElementById(o);
   div.style.display=(div.style.display=='none')? 'block':'none';
}
</script>
<body>
<a href="javascript:;" onmouseover="toggle('div1');" onmouseout="toggle('div1');">Help</a>
<div id="div1" align=center style="display:none;">
<img src="help.jpg" /><br />
</div>
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 07-22-2006 10:53 Edit Quote

It makes no difference since the image SleepingWolf wants to display is further in the DOM tree than the element triggering the :hover effect.

code:
#elementTriggeringTheHover + div#theHoverThing
{
    display:none;
}
#elementTriggeringTheHover:hover + div#theHoverThing
{
    display:block;
}

with

code:
<span id='elementTriggeringTheHover'>Help</span>
<div id='theHoverThing'>tada!!</div>

Should work.

Plugins, IFrames and (some) form controls used to be displayed on top of everything. Normally that's not the case anymore in Opera9. The trick to display an IFRame between the such elements and the thing you want to display. Check DIV over SELECT boxes (solution)

But indeed the Help might be better in the Flash itself ...
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-22-2006 15:33 Edit Quote

Hi Poi
and thank you for the code.
I tested it in Firefox and unfortunately the image still appears under the flash movie.
In IE6 the rollover does not happen - the image appears under the background when the page is opened.
HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

 IP logged posted posted 07-22-2006 16:57 Edit Quote
quote:

SleepingWolf said:
In IE6 the rollover does not happen - the image appears under the background when the page is opened.


IE6 does not support adjacent sibling selectors (i.e. 'el + class').

(Edited by HZR on 07-22-2006 17:00)
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 07-22-2006 17:51 Edit Quote

Notice that I'm aware of IE6's lack of support for adjacent sibling selectors, and that I used a SPAN and not an A tag, on which IE6 does not support the :hover pseudo class. I did that on purpose : to teach how to fish instead of giving a fish.

Sleepingwolf, what about you show what you've done so far so people can give you some hints on how to achieve your goal.



(Edited by poi on 07-22-2006 17:54)
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-22-2006 18:08 Edit Quote

Poi
Your point about learning how to fish is a valid one, I hope I will get to the point where I don't need to ask for help anymore. But i'm far from there, so I really appreciate the help you guys are offering.


I'm a photographer, not a programmer. I'm self-taught and I'm proud that I was able to put together an opensource CMS website with Flash components in less than 5 working days. I registered my own domain, created my own SQL database, installed and configured all the CMS software myself (pixelpost, folderblog, WordPress).

I was able to modify all the CSS and PhP required to get the look and feel and functionality that I wanted. I was able to work with Flash for the first time to setup a Flash component (SSP) per my specs. I added HTML mods where required. I'm also teaching myself photoshop for adjusting photos.

In the process of setting up my site I have encountered many stumbling blocks. I have gone to the SSP, WordPress and PixelPost forums - in 100% of the cases none of my problems were resolved - I was able to resolve each and everyone myself, thru research but again mostly thru trial and error.

All this to say I'm learning and want to learn more. But the way I prefer to learn is by looking at working code and saying "oh, i get it....now I can modify this sucker exactly the way i'd like".

So once more, thanks for your help. I'll post a link with my butchered up code if you guys are kind enough to take the time and point me in the right direction without laughing at a beginner's work.

thanks and cheers

SW.
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-22-2006 18:53 Edit Quote

Ok, this is as far as I've gotten to date:

Rollover HELP and you will see the draft help image appear. (It will be centered, i offset it just so it would be visible).

Firefox only:
http://www.sleepingwolves.com/gallery/testgallery.html

issues:
- does not work with IE
- Goes under instead of over the plugin
- Help should be on same line as the other menu items (header)

thanks again for any suggestions
butcher
Paranoid (IV) Inmate

From: New Jersey, USA
Insane since: Oct 2000

 IP logged posted posted 07-22-2006 21:29 Edit Quote

If I remember correctly setting the wmode attribute of the flash transparent will allow you to set the zindex to allow other stuff to show over the flash.

<param name="wmode" value="transparent">

- Butcher -
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-22-2006 23:08 Edit Quote

Hey butcher
Added the parameter, but still can't get it to work.
Tried different values for the stack as well.
kuckus
Paranoid (IV) Mad Librarian

From: Glieberlermany
Insane since: Dec 2001

 IP logged posted posted 07-23-2006 00:37 Edit Quote

A perhaps not very elegant, but workable solution would be to just move the flash movie out of sight whenever you want the help box to be visible. You can do this by having the movie's parent element set to "position: relative;" initially, and the flash movie to "position: absolute;" with a "top" value of either 0 or -10000px, depending on the help box's visibility.

To get it to work in IE you'd probably not get around using a bit of JS, but in this case I don't think I'd let that keep me
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-23-2006 02:36 Edit Quote

If this can be done thru JS, that would be fine with me...but I've tried and failed with JS as well.
Tao
Maniac (V) Inmate

From: The Pool Of Life
Insane since: Nov 2003

 IP logged posted posted 07-23-2006 03:46 Edit Quote
quote:

SleepingWolf said:
Btw, what i'm trying to do is have a "help screen", a screenshot with notations, layered on top of the flash movie. the help screen would explain the navigation. it would be activated by a mouseover on a help link in the top menu bar. I guess I'll have to do this in Flash



Just a thought, but,,,
have you tried making the first image in the first gallery a help screen? I know what you mean about the navigation, I have used SSP too and I tried this. I can't find the SWF just now as illustration, but it was only a rough first draft anyway, if I dig it out I'll link it up if it's useful.

Also, I have voices in my head telling me that SSP might be able to be configured with a welcome screen. The same voices also think that one of the formats accepted is GIF so an animation could also be utilised.

I know this does not solve the question posed but it is another way.

Also its's the first time I have ever wandered down the long halls of the CSS - DOM - XHTML - XML - XSL - XSLT Forums with anything remotely useful to say.

::tao:::: ::cell::
kuckus
Paranoid (IV) Mad Librarian

From: Glieberlermany
Insane since: Dec 2001

 IP logged posted posted 07-23-2006 10:56 Edit Quote
quote:

SleepingWolf said:

If this can be done thru JS, that would be fine with me...but I've tried and failed with JS as well.



OK

Here's a bit of an example:
http://kussatz.com/asylum/overlaying_flash_movies_with_html.html
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-23-2006 16:11 Edit Quote


Kuckus: thanks so much, I think we are almost there.

This a quick and dirty test. It works perfectly in IE..but doesn't align centered, yet, in Firefox.

In Firefox i've to figure out how to get it to center - i know the parameter is set to left=0, but why does it display centered properly in IE....i'll keep trying.

Thanks again to everyone!

http://www.sleepingwolves.com/gallery/kuckustest.html

(Edited by SleepingWolf on 07-23-2006 16:29)
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-23-2006 16:50 Edit Quote

Testing locally, I can change the javascript left value and/or the left style values.
As a result I get Firefox working but not IE or I get IE working but not Firefox

still trying to get both to work at the same time
kuckus
Paranoid (IV) Mad Librarian

From: Glieberlermany
Insane since: Dec 2001

 IP logged posted posted 07-23-2006 17:29 Edit Quote

For FF & others, setting the container's left+right margin to auto should do the trick (i.e.e.g. "margin: 0 auto;")
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-23-2006 18:45 Edit Quote

Thanks again Kuckus...your help is greatly appreciated.
I still can't get FF right. When you say the container, you mean the overall movie container?
I'm getting confused with the hundreds of possibilities for positions:
1) The CSS containers
2) The javascript function
3) The divs for movie and help screens.

Ideally I would like to be able to center both the movie and the help image horizontally.
I would also like the flexibility to control the vertical placement.
I added a parameter to move the top down a little without breaking IE.

This is the code as it stands now ( i played around but can't go further than this).
CSS

code:
}
.movieContainer {
         	position: relative;
	margin: 0 auto;
         }
         #helpScreen {
         	position: relative;
                top: 5px;
         }
         #flashMovie {
         	position: absolute;
                top: 10px;
                left: 200px;
         }



Javascript
After lots of trial and error i've left the javascript set to 0px (for right or wrong).
Could you point out the mistake(s)? TIA!


code:
function toggleHelpScreen() {
	if (document.getElementById) {
         	movie = document.getElementById('flashMovie');
         	if (movie.style.left == '0px' || !movie.style.left)
                 	movie.style.left = '-10000px';
                 else
                 	movie.style.left = '0px';
         }
}




Layers
Movie and Help:

code:
<div class="movieContainer">
<div id="helpScreen"style="left:0px; "><img src="help.jpg" width="580" height="501" /></div>
<div id="flashMovie" style="left:0px;">
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 07-23-2006 20:13 Edit Quote

Actually if you want to use a static image for the help, you could simply do:

CSS :

code:
#movieContainer
{
    background:url(help.jpg);
    width:580px;
    height:501px;
}

HTML :

code:
<span onclick='toggleHelp()'>Help</span>

<!-- *snip* (\/) oO (\/) *snap* -->

<div id='movieContainer'>
    <object id='flashMovie' type='application/x-shockwave-flash' data="your.swf' ></object>
</div>

JavaScript :

code:
function toggleHelp()
{
    if( !document.getElementById )
        return false;
    var movie = movie = document.getElementById( 'flashMovie' );
    movie.style.display = movie.style.display!='none'?'none':'';
    return true;
}

Hope that helps,



(Edited by poi on 07-23-2006 20:17)
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-23-2006 20:45 Edit Quote

Thanks Poi but I prefer a rollover and I really don't understand your references to the flash object, i've never seen it embedded that way...way over my head.

The code kuckus provided is 90% there..just can't it to work in both browsers at the same time...I can get either one to work, but not both.

Thanks again.
http://www.sleepingwolves.com/gallery/kuckustest.html

(Edited by SleepingWolf on 07-23-2006 20:54)
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 07-23-2006 21:41 Edit Quote

If you prefer a rollover, replace onclick='toggleHelp()' by onmouseover='toggleHelp()' onmouseout='toggleHelp()'

There is no such thing as the EMBED tag. Neither in the DTD of HTML 4.01 or that of XHTML 1.0. The way to include a plugin element is to use the OBJECT tag. Even Macromedia documents how to include a Flash movie without an EMBED.

[edit] why do you have a shitload of &nbsp; in the markup of your navigation Can't you set the padding of the navigation items in your CMS ? That would be much cleaner. [/edit]



(Edited by poi on 07-23-2006 21:49)
kuckus
Paranoid (IV) Mad Librarian

From: Glieberlermany
Insane since: Dec 2001

 IP logged posted posted 07-23-2006 22:27 Edit Quote
quote:
I still can't get FF right. When you say the container, you mean the overall movie container?



Yep, thought of the #movieContainer div's CSS.


quote:
I'm getting confused with the hundreds of possibilities for positions:
1) The CSS containers
2) The javascript function
3) The divs for movie and help screens.



Well, actually they're all one and the same!

Whether you set an element's position in the head's style section, inside an external css file or "inline" through a tag's style attribute (<div id="blah" style=".....") or through JS, it'll have the same outcome. But as separating style from content is always a good idea, most of the time you'll not use inline styles but keep them in an separate .css file or the <style> section in the page's head where you use IDs and classes to access the HTML tags.

The JS in this case is nothing more but another means of accessing an element's already existing styles, checking what they are when a user hovers the link and changing them accordingly.
This should be OK as you have it, as the problem is the movie container's position, not the movie itself.


If you're looking for some reading material...

http://gurusnetwork.com/tutorials/coding/css/


/*@poi: your use of diplay:none just had me thinking why I went for the repositioning in the first place..... must be because when I do Flash, I do MP3 players, and for MP3 players, repositioning is cooler as the music will keep playing in almost every browser if I don't hide them entirely */

(Edited by kuckus on 07-23-2006 22:35)
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-23-2006 22:38 Edit Quote

Hi Poi
When I said "embed" i meant in a generic fashion, that the plugin is embedded in an html container. wrong choice of words i guess.

what i meant to say is that i could not follow the way you are using the object tag..the syntax i was using is quite different and i am unable to adapt to yours even though i tried.

As for the padding of the header menu items, yeah i guess there is a much neater way to add the spacing, i will play with the CSS (p.s this is not part of the CMS, it's just plain HTML that i miscoded myself)


Kuckus:
Even with the "margin" , FF still does not work...but I really appreciate all your help. that was just great.

Poi, Kuckus, everyone else:

Thanks for all your time, please consider this thread closed, I'll try a couple more hours of hacking without knowing what i'm really doing

..if it works great...if not I did learn lots of new stuff from you guys. And I will follow the links your provided.

Thanks again. You guys are great. I hope I can return the favour one day.
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-23-2006 23:46 Edit Quote

Update:
It works!
I got Poi's code to work with both IE and FF.

http://www.sleepingwolves.com/gallery/poitest.html

THANKS!
no i just need how to figure out how to get the Help item to have the same style as the rest of the header!
SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-24-2006 01:23 Edit Quote

and here's the finished product..hope it was worth it...i'm happy though


http://www.sleepingwolves.com/gallery/gallery.html

thanks!!
poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

 IP logged posted posted 07-24-2006 01:34 Edit Quote

Nice. Just to make it more clear, you could add a big HELP watermark on the sample image. And it'd be easier to aim at your navigation items if they add a bit of padding.

Otherwise it looks nice.

Of course the bugger I am would have prefered a solution that do not require a plugin

SleepingWolf
Nervous Wreck (II) Inmate

From:
Insane since: Jul 2006

 IP logged posted posted 07-24-2006 01:58 Edit Quote

Merci Monsieur

Not sure what you mean by a solution that does not require a plugin?
You mean not to use the Flash Gallery?

As for the padding, I'm wasn't able to do it with CSS instead of nbsp....only the values for the top seemed to work, the others didn't...i guess i wasn't using the right syntax...

But i did space them out with spaces, and you're right it looks much better. thanks for the suggestion.


one quirk i noticed, and i can live with.
if you rollover Help with FF while watching a slideshow, on mouseout it returns to the Album View.
if you rollover Help with IE while watching a slidewhow, on mouseout it returns to the Slideshow..which makes more sense.

(Edited by SleepingWolf on 07-24-2006 02:04)


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu