HTML - Rollover Crisis

Hi, I'm Sam. New to the forum and looking for some advice!! Ok, I have - after many failed attempts - worked out how to do text to text rollovers (ie: I highlight the word Molly anda pops up appears with "Da doggy!"

what I would really like to do, but I'm not sure of I can in blogger, is have the underlined word pop up an image when the mouse is rolled over. Is this possible?

Any help would mean you would be worshipped forever (or at least until I have got used to doing it and it becomes second nature - hee hee!!)

I'm not sure whether this would be html or CSS.. but does anybody know how to get rollover text to popup using html or CSS like I have circled in this screenshot?:

http://i134.photobucket.com/albums/q...eenshot_03.jpg

Any help is greatly appreciated.

Hi, I'm trying to have my text link to shift to the right about a pixel or 2 when I roll over it, any help would be greatly appreciated.

Tom.

Hello everybody.

I was wondering if you could help.

Firstly I'm a noob to css/html.

I've come stuck. I've created a site in illustrator imported into dreamweaver (I know this isn't the right way but it's easier for me at the moment, sort of) and added lightbox 2 to it. It's been smooth sailing and lightbox works great.

This is the code I see: (note I've just put the code for the image I want to use)

<div align="center"><a href="images/locogsequins copy.jpg"rel="lightbox"><img src="images/index_03.jpg" width="262" height="188"


Messy I know , but it's working for me so far.

However, on top of having the lightbox effect I would like to add a rollover effect. So when a viewer lands on the page they will see everything in black and white, when they roll over an image it turns to colour.

The code I've found is

<div><img src="images/locogsequins_bw.jpg"
onmouseover="this.src='images/locogsequins copy.jpg'"
onmouseout="this.src='images/locogsequins_bw.jpg'">

which works. (I've tested via preview in DW)

My question is where do I insert this into the earlier code so they work together?

I'd very grateful for any help.

Thanks x

I have already posted rollover threads, and my problem was solved. However, as I was building my online website, I realised that an end-user has to wait for music files to buffer and load before the sound actually plays.

Basically, my rollover is this:

Code:

  <TD ROWSPAN="1" COLSPAN="1" WIDTH="156" HEIGHT="156"> <a href="javascript:void(0);" onMouseOut="MM_swapImgRestore();stopSound(0);" onMouseOver="MM_swapImage('Image9','','musicplaying.gif',1);playSound(0);"><img src="piece1hit.jpg" name="Image9" width="156" height="156" border="0"></a></TD>

- This plays music and an animation when a mouse is hovered over the original picture.

My problem: when the mouse is hovered over the image, it takes about 30 seconds for the music to start playing as it is loading.

To solve this, I want a line of text to appear when the mouse hovers over the image which lasts about 30 seconds, saying: "Please wait as music buffers."
I have a line of code in mind:
[code]<p class="time" begin="10" dur="5">text</p>[code]

I also have all of the necessary coding to activate this code at the top of my page.

But my question is: how do I put the timed writing, into the mouseover code?

Any suggestions would be greatly appreciated.

I have a menu bar where i place the script for RollOver Background. But when i upload it, second background doen't load untill i place the cursor on tab. Even After placing the cursor it takes around 10 second to load.

Note: this problem is not at locally. As i upload it then it comes. Even i have place the "onLoad" in body tag.

Code is below:


<table width="685" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="96" height="29" align="center" background="images/tab_a_01.jpg" onmouseover="this.style.background='url(images/tab_a_02.jpg)'" onmouseout="this.style.background='url(images/tab_a_01.jpg)'" valign="absmiddle" style="background-repeat"><div style="margin-top:10px"><a href="#" class="tab"><b>Home</b></a></div></td>
<td width="10">&nbsp;</td>
<td width="96" height="29" align="center" background="images/tab_a_01.jpg" onmouseover="this.style.background='url(images/tab_a_02.jpg)'" onmouseout="this.style.background='url(images/tab_a_01.jpg)'" valign="absmiddle" style="background-repeat"><div style="margin-top:10px"><a href="#" class="tab"><b>Join
Today</b></a></div></td>
<td width="10">&nbsp;</td>
<td width="155">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="96">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="96">&nbsp;</td>
<td width="10">&nbsp;</td>
<td width="96">&nbsp;</td>
</tr>
</table>

Hello.

Please could you look at this code for me and tell me what I have done wrong?

I can't get it to change the picture on rollover.

Thank you

Code:

<div style="background-color:#ff0099;
                 height:25px;width:956px;float:left;"">
  <a href="http://www.google.co.uk" 
	ONMOUSEOVER='rollover.src="http://farm5.static.flickr.com/4145/4983786279_f55ce0b9bb_m.jpg"' 
	ONMOUSEOUT='rollover.src="http://farm5.static.flickr.com/4145/4983658949_91e6ffdc21_m.jpg"'>
<img src="http://farm5.static.flickr.com/4145/4983658949_91e6ffdc21_m.jpg" NAME="rollover" width="236" height="25" border="0">
</a>
<a href="http://www.google.co.uk" 
	ONMOUSEOVER='rollover.src="http://farm5.static.flickr.com/4103/4984384100_9249a58aa3_m.jpg"' 
	ONMOUSEOUT='rollover.src="http://farm5.static.flickr.com/4149/4984257696_f1fdb7cd27_m.jpg"'>
<img src="http://farm5.static.flickr.com/4149/4984257696_f1fdb7cd27_m.jpg" NAME="rollover" width="236" height="25" border="0">
</a>
<a href="http://www.google.co.uk" 
       ONMOUSEOVER='rollover.src="http://farm5.static.flickr.com/4083/4984384182_ecc8cd023c_m.jpg"' 
	ONMOUSEOUT='rollover.src="http://farm5.static.flickr.com/4112/4983659827_547410d1ed_m.jpg"' target="_blank">
<img src="http://farm5.static.flickr.com/4112/4983659827_547410d1ed_m.jpg" name="rollover" width="236" height="25" border="0">
</a>
<a href="http://www.google.co.uk" 
	ONMOUSEOVER='rollover.src="http://farm5.static.flickr.com/4144/4983786159_e7730fa193_m.jpg"' 
	ONMOUSEOUT='rollover.src="http://farm5.static.flickr.com/4150/4983658139_5b6796a521_m.jpg"'>
<img src="http://farm5.static.flickr.com/4150/4983658139_5b6796a521_m.jpg" NAME="rollover" width="236" height="25" border="0">
</a>
  </div>

is there some way so that i can have the rollover image appear anywhere on the page instead right over the original image??

please help thanks!

I know how to do a rollover evect with js but I was wondering if it is possible to do with css.

Thanks for any help you can give me!

Hi, if anyone would be able to help me with this issue im having doing an image rollover it would be great. Thank you

Is there a way to code a thumbnail so that onMouseover a larger version opens in a separate window and onMouseout the window automatically closes? I'm developing a web form for ordering display panels and there will be several catagories for the user to choose from each containing multiple selections. Something like this would aid the user by not forcing them to constantly close windows while making their choices.

I'm using the DOM rollover script, but I have no idea how to put text over it. Is it even possible? I'd appreciate any help. Thanks!

This is what I'm trying to do.... I have mouseovers set up for the navigation bar and I now want to add a drop down menu to one of the navigation images. I searched the internet and tried fireworks and I couldn't find a solution that worked for me. I can get a regular drop down menu to work but I can't get one to work with a rollover image. I want to set it up like nvidia.com. Does anyone have a solution to my problem?

I've been helping a friend of mine build a website for a local group of guys that do stunt shows on motorcycles. We've got the page done for the most part, just need some tweeking here and there on most of the pages. I have a question though about the front page we've got set up. Here's a LINK. The four GIF rollover images are really turning into a problem. The only way I could figure out how to place them and have them overlapping each other was by using a Position Absolute tag. That however is causing problems depending on the end user's screen resolution, or if they've got a favorites bar or whatever docked on the browser screen. Would be HIGHLY greatful if someone could point me in the right direction of what I can do to get these images placed inside of the table, while being able to overlap them, and NOT having to deal with absolute positioning. Thanks VERY much in advance for any help!

I'm pretty average with HTML or any web design style at all so please bear with me.

I am the club's web coordinator, all I do is simple things such as update the site with events and any announcements. One thing I would like to add is our picture; however, I have our names as a link to our email, I was wondering if I could also use that same Text/Link and when they rollover it, it'll show our picture so that students who visit our site can know who we are if they don't already.

I've seen this done a couple times, but I'm not sure how to make it myself. Any help is appreciated, thanks.