Changing image with MouseOver away from?

[Bex]

Could someone please provide a code how I could do the following. Check this test-page:

http://www.kolumbus.fi/bexen/test/gall_test.html

The effect I'm after is that when I move the mouse-pointer on any of the names on left-hand side of the screen, the thumbnailed image of that particular actress should change into a "highlighted" version. In the page above this is the view that I should get when the mouse-pointer is over the text "Lauren Bacall" on the left. The image of her on the right hand side of the screen should change to the version that has yellow, highlighting borders around it. So I would need to have some sort of link between the name on the left and the image of my choice on the right. How can this be done? On MouseOut the picture would of course change back to the normal version (as other pictures now on this test-page)

I also want to use bold for the text under mouse-over, as is the case here, but I will do that with CSS - no need for any Java-help for that.

The code should also allow there to be a hyperlink from either the text or the corresponding thumbnail, to a full-sized image.

I will do a bordered and un-bordered version of each thumbnail image in same folder, and that's why I need to know how the image can be made to change. BUT if you know a method (with MouseOver again) to add a similar kind of border around each thumbnail image (and thus not having any need to have two versions of each image), tips on that would be just as welcome. The finished page will most likely be only on my computer and not online, so no real need to take care of pre-loading etc...

I am a real beginner in all this, so as easy an answer as possible would be very much appreciated, thanks!

Mika

[Jona]

Okay, here's whatcha do. First, put each image in a <DIV> tag. And then use this: onmouseover="this.style.borderColor='yellow'" onmouseout="this.style.borderColor=''"

--Oh, and tell me if it works... :p

[Bex]

Thanks for the reply, but it's not quite what I'm looking for. First of all, the colour-changing event should take place away from the mouse-pointer. When mouse-pointer is over certain text on the left of the screen, the change should take place on the right of the screen, for a specified image thumbnail.

What you suggested - if I got it correctly - makes the colour-change happen under the mousepointer, not at other location which I want. Another thing is that putting each image inside div-tags creates a break of line after each image. And so the thumbnails would be one long pillar, one per row - which I don't want.

Thanks for your reply all the same! More suggestions and tips are still welcome!

Mika

[Jona]

Put each one in a <div> tag and give each <div> a specific id (id="myID1"). Then, if those texts are anchors: <a href="image.jpg" target="_blank" onmouseover="document.getElementById('myDiv1').style.borderColor='yellow';document.getElementById('myDiv1').style .border='3px';" onmouseout="document.getElementById('myDiv1').style.borderColor='';document.getElemntById('myDiv1').stlye.border ='0px';"> text </a>

Please explain yourself a little better.... When you mouseover the text to the left, a border goes around the corresponding image, right?

[havik]

Here's what I would do:

give each image a name:

<img src="source" name="image1">

then create one function that'll access that images style to change the border.

function border(event, image) {

// access border in here and if event == "highlight", put border on
// otherwise, take border off

}

then call this function where the text is (I used <p> as an example):

<p onmouseover="border('highlight','image1')" onmouseout="border('hide', 'image1')">Image 1</p>

Havik

[Bex]

Thanks for your replies, havik and Jona. I still couldn't do it I'm afraid. Yes, Jona, what you asked in your latest paragraph is exactly the effect I'm looking for.

I really am a newcomer in all this and I didn't realise it could be this complicated :-) I think I need to go and learn some Java-basics before getting further with all this. I'm sure your advice is sound and OK, but I still can't write it all down inside an html so that everything's fine with it.

I'll keep trying based on your advice, so thanks!

Of course, if either of you have time to pick the source code from that test page and include your suggestions of code inside it and then post it back here in this forum, I would be more than grateful. That way I could also see what should be inside the <head>-element, what inside <body>-element etc... yeah - I told you this is all new to me!

Thanks again!

Mika

[Jona]

Originally posted by Bex
Thanks for your replies, havik and Jona.

You're welcome. :D

Originally posted by Bex
[b]Yes, Jona, what you asked in your latest paragraph is exactly the effect I'm looking for.

Okay, you don't really have to explain so much. Just say exactly what you want, and it makes it easier for us. :)

I really am a newcomer in all this and I didn't realise it could be this complicated :-)

It's not that it's complicated, I guess we just didn't understand what you want. Havik was going into a little bit more advanced stuff. I figured you wanted something simple like this.


I think I need to go and learn some Java-basics before getting further with all this.

Um, a point to make for you. Don't confuse Java with JavaScript. JavaScript is a client-side scripting language (what we're working with right now). Java is more for building standalone applications. It's also known as JSP for server-side processing of all kinds, and it much more complex and difficult than JavaScript (although the syntax is very similar).


Of course, if either of you have time to pick the source code from that test page....
...That way I could also see what should be inside the <head>-element, what inside <body>-element etc...


Will do.... :)

[Jona]

Okay, I did the first three or so images. Just keep doing the same thing over and over till you reach the last one. Note: Remember to change the name when you do this.

<HTML>
<HEAD>
<script>
function setVars(){
var harlow = document.images['harlow'];
var hayworth = document.images['hayworth'];
var bergman = document.images['bergman'];
var monroe = document.images['monroe'];
var gardner = document.images['gardner'];
var bacall = document.images['bacall'];
var reed = document.images['reed'];
}
window.onload=setVars;
</script>
<style type="text/css">
p.border1 {border-style: solid;border-color: yellow}
p.border2 {border-style: solid;border-color: black}
</style>

<TITLE>GALLERY 1</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<TABLE WIDTH="630" BORDER="0" CELLPADDING="5" CELLSPACING="0">
<TR>
<TD WIDTH="200" ALIGN="left" BGCOLOR="#DDDDDD">
<FONT FACE="verdana" size="+1" color="#666666">
<span onmouseover="this.style.fontWeight='bold';harlow.border='3px'; harlow.style.borderColor='yellow'" onmouseout="harlow.border='0px';harlow.style.borderColor='';this.style.fontWeight=''">Jean Harlow</span><br>
<span onmouseover="this.style.fontWeight='bold';hayworth.border='3px'; hayworth.style.borderColor='yellow'" onmouseout="hayworth.style.border='0px';hayworth.style.borderColor='';this.style.fontWeight=''">Rita Hayworth</span><br>
<span onmouseover="this.style.fontWeight='bold';bergman.style.border='3px';bergman.style.borderColor='yellow'" onmouseout="bergman.style.border='0px';bergman.stlye.borderColor='';this.style.fontWeight=''">Ingrid Bergman</span><br>
Marilyn Monroe<br>
Ava Gardner<br>
Hedy Lamarr<br>
Lauren Bacall<br>
Donna Reed
</FONT>
</TD>

<TD WIDTH="430" ALIGN="CENTER" BGCOLOR="#89776D">
<img src="tn_harlow.jpg" name="harlow"></div>
<img src="tn_hayworth.jpg" name="hayworth">
<img src="tn_bergman.jpg" name="bergman">
<img src="tn_monroe.jpg" name="monroe"><br>
<img src="tn_gardner.jpg" name="gardner">
<img src="tn_lamarr.jpg" name="lamarr">
<img src="tn_bacall_a.jpg" name="bacall">
<img src="tn_reed.jpg" name="reed">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

[Bex]

WOW... Thanks a million for taking time to show "the works" for me. It works now exactly how I wanted it to (at least with IE 6.0 it does)!!

Only thing I altered in that script you wrote were the couple of typos (stlye as style :-), and then copied your input for the rest of the photos. It all looks so very logical now.

I have hundreds of vintage photographs such as these that I want to "catalogise" like this, and your help makes it now possible to add this highlight-function there what I was looking for. All that I need to do know is to add all the rest of the photos there and include the hyperlinks to the actual full-size photos, and the page is done.

Thanks once again for all your help - to havik, too! MUCH appreciated!

The test page...

http://www.kolumbus.fi/bexen/test/gall_test.html

... is now updated with these changes and you can check yourself how it works.

Mika

[Jona]

Glad you got it. :)