How to make an image change when a seperate link is rolled over?

[rharris07]

I don't know where to look for something like this, I can't figure out exactly how to even word it properly so I hope I get my question across well enough...


I am needing to change a particular image to another image when a text link is rolled over. Basically I have a text navigational menu set up and in an image above it I have a scene laid out that a different flower needs to pop up when any given text link is rolled over. Now I have each flower saved seperately, and its set to where if I had done this just as as simple rollover I'd be finished because I have my before and after images needed, but the text menu cannot be placed within the scene/flower images...SO how do I make an image switch to another image by rolling over a text link located in a seperate table?

Any help at all would greatly be appreciated!

Thanks so much,

Ryan

[mburt]

Please search the forums before posting, there's been plenty of threads started very similar to this one.

[rharris07]

I searched up but could find nothing that would assist me in what I need to do. Any particular search terms that might guide me? I searched up link image rollover text but found nothing that would help.

I apologize if my question is redundant but again, I've found absolutely nothing already in the forums that might help me...

Ryan

[Insane_Edna]

What you are looking for is an image swap or image rollover script. Here are a few links that I found for you to try out and see if they fit your needs:

Link 1 (http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm)
Link 2 (http://www.htmlite.com/JS019.php)
Link 3 (http://javascript.internet.com/miscellaneous/image-swap-and-preload.html)
Link 4 (http://bermangraphics.com/tips/mouseover.htm)

Hopefully this is what you are looking for and it helps you out.

[rharris07]

Thanks SO much for your help - unfortunately none of those examples do what I need. Thats the problem I think, its so hard to explain without showing an example...unfortunately I don't have a way to show an example right now...not anything thats worth while at least.

Basically I have a text based navigational table located underneath a header image. The header image is in no way connected to the navigational table...BUT I need the header image to change if I roll over any given text link in the navigation table. Say I roll over Contact, I need a particular image to load up top, or if I roll over About then a seperate image loads up top.

I hope that explains it better...I know how the image swap coding works where you roll over a particular image and a seperate image loads - but thats not what I need. I need a completely seperate text link in a totally seperate table to change an image not linked at all and in a different table.

Make any sense? I'm sorry that I've not been clear enough!

Thanks again for all the help so far!!!

Ryan

[BLiZZaRD]

How do you want to do it? PHP, JS, FLASH!!!?

do you have a link to the current page?

[rharris07]

http://www.ryandharris.com/ohr/index3.html

There is the very basic, basic layout so far. Now where that flower is located in the midsection - that midsection is what I have cut out of the picture and have multiple images to go in there, each one has a different flower on it. When you roll over the text below, I need the corresponding flower to pop up above it.

I don't know what to use for this, but I don't know how to write in flash at all so I couldn't really do that. Anything at this point outside of flash would be great to just give me some kind of idea on how to make this work!

Thanks again!

Ryan

[Ryan Fitton]

I have found this on Dynamic Drive Click here (http://dynamicdrive.com/dynamicindex15/domroll2.htm) or click the link below.

http://dynamicdrive.com/dynamicindex15/domroll2.htm

[rharris07]

That seems to just be a different mouseover effect - which isn't what I need. I appreciate you looking and posting that though. I need to find out how to have a seperate image change when a text link that has absolutely no contact with the image that needs to be changed is rolled over.

[Insane_Edna]

I think I understand what you are looking for and you can use an image swap script to accomplish this. I have attached a demo of this using the site you submitted as a link. Hopefully this is what you are looking for and will help you to finish your site. You should also look at removing the font tags from your site and instead use a cascading style sheet to style elements.
If you have any further question feel free to ask.
800

[Rockonmetal]

This might be what your looking for.

Simple I told this to someone before. IT IS EASY!
<a href="news.html" onMouseOver="document.image2.src='mouseover button link'"
onMouseOut="document.image2.src='originalbutton link'">
<img src="originalbutton" name="image2" border="0"></a>

[rharris07]

Insane_Edna, THANK YOU SO MUCH!!!!

I am truly thankful that you were able to figure this out for me. I really, really do appreciate it. That is exactly what I needed.

Thanks so much again, and thank you to everyone that gave me suggestions as well.

Ryan

[mburt]

The DOM method would be to use document.image2.src=setAttribute('src','whatever.jpg'); but your method works (or should) fine.

[ShePinkFish]

Hello Insane Edna,

Your script was very helpful to me too, thank you so much!

I was wondering if you could help me out with a slight modification to it (please, keep in mind I am not a programmer!)

Here's the website I'm designing: http://3dcc.indizivel.com So far all images are placeholders. Please note:

Button 1 - Uses your script.Notice that it swaps the image in the main image area but it does not swaps its own image to create a rollover button state.

Button 2 - Uses no script therefore it doesn't change the image in the main image area BUT it changes its own image to create a rollover button state.

Button 3 - uses another script I found online. It does EXACTLY what I need. It blends both functionalities above, swapping the image in the main image area AND its own image to create a rollover state. The problem though is that it doesn't work CROSSBROWSER!! It only works with Firefox, IExplorer messes everything up.

Since your script (used for Button 1) works perfectly with IExplorer, I was wondering if you could help me out here (or anyone else for that matter!)

Thanks in advance!

EDIT********

Actually, I just made a quick addition to the script for Button 3 so that I could add a "press down" stage to the button, which will be needed in the final script. Everything works perfectly on Firefox... Damn you, IExplorer!! hehe :)

[ShePinkFish]

Never mind. I managed to solve the problem by being a little daring and writing my own script. Thanks anyways!

[evandowen]

Hello ShePinkFish and Insane Edna,
I have a similar coding challenge. During a mouseover I want to load a new image in one cell and a description in a different cell. If you view the following page you'll see the empty shell of what I want I'm trying to do...

http://www.smashhitdisplays.com//default-new07.aspx

There is only one active link in the body of the above page and it is named 10 Foot Pop Up Displays. During a mouseover an image is loaded, actually replaced, as an image will load upon opening. In addition I want a text description to load in the light grey cell below the links and image during the same mouseover. An initial text description will load when the page loads.

All links in the body of the page will work in this manner. I'm no programmer so any help would be appreciated.

evandowen

[cadre]

could someone hook me up with the code on this one... similar issue...

my page thus far is http://www.cadrecorner.com/caberos/

need mouseover for each of the links to the left of the big circle to show an image within the big circle... I would have images just like the big circle with the images over them of course...

Thanks in advance...

email me direct if you like as well... cadre@cadrecorner.com

[cadre]

anyone? please? whimper whimper ;)

[cadre]

hello?