PDA

Click to See Complete Forum and Search --> : some javascript help on pictures

calrockx
08-12-2003, 01:01 AM
i was hoping i could get some help with this coding...

when someone hovers over a picture link on my website, i want a picture to show up in an internal window on that page. i know how to make a picture show up on the same page when someone hovers over a picture link but not the < i frame> internal window
Gollum
08-12-2003, 02:20 AM
An iframe is like any other frame, so just access its document to get at the stuff inside. try this example...
test2.html

<html><body>
<img id="theImg" src="spacer.gif">
</body></html>

test.html

<html><body>
<img src="image1.gif" width=20 height=20 onmouseover="window.frm.document.getElementById('theImg').src = 'image1.gif'">
<img src="image2.gif" width=20 height=20 onmouseover="window.frm.document.getElementById('theImg').src = 'image2.gif'">
<iframe name=frm width=200 height=200 src="test2.html"></iframe>
</body></html>
calrockx
08-12-2003, 01:25 PM
hm, i tried that test, and it didn't work. it said line 1, error: 'windown.frm.document.getElementById(...)' is null or not an object. what went wrong?
Khalid Ali
08-13-2003, 01:33 AM
Call this function fromon load or onclickevent in the main page that has iframe init.

function ChangeImageInIframe(){
var fdoc = parent.frames[0].document.getElementsByTagName("body")[0].document;
fdoc.getElementById("img_1").src = "image.gif";
}

make sure you hve the image path correct.It will change the image,
calrockx
08-13-2003, 01:49 PM
okay, i really hate to sound like an idiot, but i will admit i am new at this, and i've been mostly just copying and pasting javascript so far, with just the most basic understanding of the code.

how do i call a function, and what values do i put in? just the picture files?

here's the page that has the pictures that i want to lead to a picture showing up in the internal frame.






<!---
<HTML>

<HEAD>

<TITLE>well hello</TITLE>


<STYLE>
BODY {background: white; color:white}
</STYLE>

<script language="JavaScript">
<!--




function NAME_IT() {
window.open('contact.htm','EANITHING','toolbar=no,location=no, directories=no, status=yes, menubar=no, resizable=yes, copyhistory=no, scrollbars=no, width=300, height=300');
};

function GBOOK() {
window.open('http://books.dreambook.com/calrockx/main.html','EANITHING','toolbar=no,location=no, directories=no, status=yes, menubar=no, resizable=yes, copyhistory=no, scrollbars=yes, width=800, height=500');
}


function movein(which,html){

if (document.getElementById)
document.getElementById("boxdescription").innerHTML=html
else
boxdescription.innerHTML=html
}

function moveout(which){

if (document.getElementById)
document.getElementById("boxdescription").innerHTML='&nbsp;'
else
boxdescription.innerHTML='&nbsp;'
}


</script>


</HEAD>



<BODY>

<TABLE WIDTH=100% HEIGHT=100% CELLSPACING=0 STYLE="font-family:arial">
<TR>
<TD COLSPAN=7 HEIGHT=20px BGCOLOR=BLACK>

<TABLE WIDTH=100%>
<TR>
<TD WIDTH="100">
<FONT><A HREF="images/updates.htm" TARGET=main STYLE="color:red; font-size:14pt; font-weight:bold; text-decoration:none">
<I>www.calrockx.com</I></A></FONT></TD>
<TD ALIGN=RIGHT>
<SCRIPT>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()+1
if (month<10)
month="0"+month
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
document.write("<font STYLE='color:white; font-size:8pt'>"+month+"."+daym+"."+year+"</font>")</SCRIPT></TD>
</TR>
</TABLE>
</TR>
<TR>
<TD WIDTH=2%></TD>
<TD WIDTH="150" BGCOLOR=white VALIGN=TOP ALIGN=CENTER><BR>

<TABLE>
<TR>



[**these three table cells have the three pictures i'm talking about**]


<TD height="31"><A HREF="pictures/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('picicon','','images/pictures2.jpg',1)" TARGET="main"><IMG NAME="picicon" BORDER="0" SRC="images/pictures.jpg"></A></TD>
</TR>
<TR>
<TD><A HREF="ramblings/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ramicon','','images/ramblings2.jpg',1)" TARGET="main"><IMG NAME="ramicon" BORDER="0" SRC="images/ramblings.jpg"></A></TD>
</TR>
<TR>
<TD><A HREF="links/index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('linkicon','','images/links2.jpg',1)" TARGET="main"><IMG NAME="linkicon" BORDER="0" SRC="images/links.jpg"></A></TD>
</TR>
</TABLE>


<TD WIDTH=500 VALIGN=TOP>




[**here is where the picture should show up, in this internal frame**]


<IFRAME SRC="images/updates.htm" FRAMEBORDER=0 WIDTH=100% HEIGHT=100% NAME=main></IFRAME>
</TD>
<TD WIDTH=5 BGCOLOR=BLACK></TD>
<TD WIDTH="268" BGCOLOR=BLACK BACKGROUND="images/bluewin.jpg" VALIGN=BOTTOM><IMG SRC="images/blackbar.jpg"></TD>
<TD WIDTH=5 BGCOLOR=BLACK></TD>
<TD WIDTH=25></TD>
</TR>
<TR>
<TD COLSPAN=8 HEIGHT=20 BGCOLOR=BLACK>
<TABLE WIDTH=100% STYLE=font-family: arial" CELLSPACING=0>
<TR>
<TD WIDTH=180><SMALL><A HREF="javascript:GBOOK()" onmouseover="window.status='sign the guestbook.'; return true""
STYLE="color: white; font-weight:bold; text-decoration:none">[ guestbook ]</A></SMALL>
<SMALL><A HREF="javascript:NAME_IT()" onmouseover="window.status='send me some email.'; return true"
STYLE="color: white; font-weight:bold; text-decoration:none">[ contact ]</A></SMALL></TD>

<TD ALIGN=RIGHT>


<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>
<TR>
<TD>

<TABLE CELLPADDING=1 CELLSPACING=0 BORDER=0>
<TR>
<TD WIDTh=200 ALIGN=RIGHT><FONT id="boxdescription" STYLE="color: white; font-size:8pt"> </FONT></TD>
</TR>
</TABLE>

</TD>
<TD>

<TABLE RULES=ALL STYLE="color:white; font-family: arial; font-size:8pt; font-weight:bold" CELLSPACING=0 CELLPADDING=2>
<TR>
<TD><<</TD>
<TD onMouseOver="bgColor='red', this.style.color='red', movein(this,'a little site about my toyota.')"
onMouseOut="bgColor='black', this.style.color='white', moveout(this)">
<A HREF="4runner/index.htm" STYLE="text-decoration:none" TARGET="_blank"><FONT STYLE="color:white">4RUNNER</FONT></A></TD>
<TD onMouseOver="bgColor='red', this.style.color='red', movein(this,'see bobby in motorcycle action.')"
onMouseOut="bgColor='black', this.style.color='white', moveout(this)">
<A HREF="pictures/supertt/index.htm" STYLE="text-decoration:none" TARGET="_blank"><FONT STYLE="color:white">Super TT</FONT></A></TD>
<TD onMouseOver="bgColor='red', this.style.color='red', movein(this,'then hear bobby rock.')"
onMouseOut="bgColor='black', this.style.color='white', moveout(this)">
<A HREF="bobby/index.htm" STYLE="text-decoration:none" TARGET="_blank"><FONT STYLE="color:white">Burnzio Tunes</FONT></A></TD>
</TR>
</TABLE>

</TD>
<TD WIDTH=30></TD>
</TR>
</TABLE>

</TR>
</TABLE>
</TR>
</TABLE>

</BODY>
</HTML>

--->
calrockx
08-15-2003, 09:57 AM
anyone?