Multiple onMouseOver targets...

admin · Jan 9, 2008

I think I have it mostly figured out now...thanx to everyone's help.

Here's my final problem... 
 
Take a look at the web page at the end of this post and let me know if there's a way that I can make an ONMOUSEOVER control the text-change of the link (as it does now) AND swap pictures in the top table cell. 
 
Thanx. 
 
<a class="postlink" href="http://home.bendcable.com/theallensplace/">http://home.bendcable.com/theallensplace/</a>This is what you need to do, 
in the cell where you want to display on mouseover a link,add a div tag 
 
<div id="img_div"></div> 
 
then in the links where you change the color for the link 
 
replace these event calls 
 
onMouseOver="window.status='Link #1...'; return true" onMouseOut="window.status=''; return true" 
 
with this 
 
onMouseOver="window.status='Link #1...'; return true;swapImage('simein=mge.gif')" onMouseOut="window.status=''; return true;document.getElementById('img_div').style.visibility='hidden';" 
 
 
 
now in the head section of your html page add this method 
 
function swapImage(imgsrc){ 
var obj= document.getElementById('img_div'); 
var img = document.createElement("img"); 
img.setAttribute("src",imgsrc); 
obj.appendChild(img); 
obj.style.visibility="visible"; 
} 
 
this should take acare of it..

Sorry 'bout this...not meaning to be a complete idiot and all, but as for div tags and the javascript...into which files shal I paste them? 
 
Also, did you realize that I'm using IFRAMES as well as tables? 
 
Thank you for your patience.yes you will all of the recomendational code above in the page that you load in the iframe,and ofcourse I am aware of your echnique..

Okay. 
 
I put the <div> stuff in the top (target) cell where I want the picture to show. 
 
I replaced the existing mouseovers in the nav (calling) cell. 
 
I put the javascript in the nav (calling) cell where I want the picture to show. 
 
Nothing's happening...aside from my mouseover text-change is still working. 
 
Is everything in the right place? 
 
Thanx.Oh yeah... 
 
And I replaced the "img" and the "src" with the name of the image.post a link or update the link u posted above so that I can view the changes you 've madeOkay. 
 
I updated the site. 
 
Thanx.Ok here is the javascript part,I have made required changes to it. 
 
<script> 
function swapImage(imgsrc){ 
var obj= parent.topFrame.document.getElementById('img_div'); 
var img = document.createElement("img"); 
img.setAttribute("src",imgsrc); 
obj.appendChild(img); 
obj.style.visibility="visible"; 
} 
 
function hideImage(){ 
var obj= parent.topFrame.document.getElementById('img_div'); 
obj.style.visibility="hidden"; 
obj.innerHTML = "" 
} 
</script> 
 
You must not use frame name "top" 
 
because it can confuse the page javascript engine. 
 
I have assumed the name for top frame as 
"topFrame" 
 
and here is the links code that will call it 
 
<a class="tap" href=http://www.webdeveloper.com/forum/archive/index.php/"b01.html" onMouseOver="swapImage('images/bw_01.jpg');window.status='Link #1...'; return true;" onMouseOut="hideImage();window.status=''; return true;" target="bod">Link #1</a>Okay. 
 
Did I put everything where it was supposed to go? 
 
I just need to rename the frame name, right? 
 
Thanx.yes rename the frame name,,, 
aswell as use the code that I justposted 
 
just change the images/bw_01.gif to the image which u want to displayOkay. 
 
Got everything set up just like you specified, but still, no pictures. 
 
In addition, my mouseover window.status text display isn't working anymore. 
 
Thanx.for the frame name 
 
parent.a.document.getElementById('img_div'); 
 
where a represents the frame name,but when I checked your code I don't see a frame name "a"? 
 
 
make your top frame name "a" or some other name and change the code appropriately using that nameSorry...I was probably still editing. 
 
Check again. 
 
Thanx.and for the status bar.. 
 
add return false in both javascript functions at towards the very end.. 
 
 
function swapImage(imgsrc){ 
var obj= parent.topFrame.document.getElementById('img_div'); 
var img = document.createElement("img"); 
img.setAttribute("src",imgsrc); 
obj.appendChild(img); 
obj.style.visibility="visible"; 
return true; 
} 
 
function hideImage(){ 
var obj= parent.topFrame.document.getElementById('img_div'); 
obj.style.visibility="hidden"; 
obj.innerHTML = ""; 
return true; 
}On my system using Mozilla/NS6+ browser I can see the images..how about you?I'm using IE 6 and can't see the images, nor will my window.status text show up. 
 
Thanx.I just viewed it in Netscape 7 and the pics do show up, but the window.status text doesn't and the middle cell isn't showing up either. It should fill the screen the rest of the way so that it goes like this: 
 
top 
 
nav 
 
bod 
bod 
bod 
bod 
bod 
bod 
bod 
 
bot 
 
I hate this cross-browser stuff!!! 
 
Thanx.Update the swap image with this code actually replace the whole function with the one below 
 
function swapImage(imgsrc){ 
var obj= parent.taptop.document.getElementById('img_div'); 
if(document.all){ 
obj.innerHTML = "<img src=http://www.webdeveloper.com/forum/archive/index.php/\""+imgsrc+"\" alt=\""+imgsrc+"\"/>"; 
}else{ 
var img = document.createElement("img"); 
img.setAttribute("src",imgsrc); 
obj.appendChild(img); 
} 
obj.style.visibility="visible"; 
return true; 
} 
 
And make sure the hideImage function do not have 2 return statements..one statement return true should do itMy bad instead of return true,use reeturn false in both function.AWESOME!!! 
 
YOU ARE A STAR!!! 
 
Thanx!!! 
 
Now all I need to do is figure out how to have a default image for each corresponding page that changes onmouseover and changes back onmouseout. 
 
When each specific page loads, it will have it's own corresponding graphic in the top cell. Mouseover will still change it, but mouseout will return it to the corresponding graphic for that page. 
 
Thanx again!!!Well...thought I could at least do that, but nope. 
 
You wouldn't happen to be able to help me with that as well, would you?

Also, I'll need your first and last name so I can give credit to you on my site when it's complete. 
 
Thanx again.I sure can help you with that,if you need..

unfortunately I am not available this evening may be later tonight or tomorrow, 
 
Khalid AliAre you available?

Oh yess...:

Sorry 'bout the silence. Trying to learn CSS. 
 
Anyway, 
 
Can you help me with each page having it's own default image in the top cell, but still changing on mouseover and changing back on mouseout? 
 
Thanx yet again.I'll be able to work with you on this after an hour...talk to you then...

Multiple onMouseOver targets...

admin

Administrator