Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

change img in iframe from parent link

Status
Not open for further replies.
CrazyLuc

CrazyLuc

Technical User
Dec 6, 2004
7
CA
Hi folks.

I have been to many many places..and could find none, and alter none to suit my purpose. (but I got really really close, but ended up not working.) Any insight would be great.

I'd like to have a link which upon mouseover, will change the image in an iframe. Only the link is located in the parent window.

Hope to hear from you.
 
Sort by date Sort by votes
Code: 
function setSource(src)
{
  document.getElementById("ifr").document.getElementById("img").src = src;
}

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
Now for the follow up...here's the code in my page which applies to this..

<head>
<script type="text/javascript">
function setSource(src)
{ document.getElementById("ifr").document.getElementById("img").src = src; }
</script>
</head>

<body>
<a onmouseover="setSource('imagename.jpg')"
href=" target="#IF1">Joe</a><br><br>
</body>

When I code it as above, it doesn't produce the effect. So I wonder must I specify the frames ID like this? :
<iframe id="ifr">

or does the image file name go in the head section of the code..?

Thanks.
 
Upvote 0 Downvote
You are correct. You must specify the iframe's id (can be "ifr" or you can change the code in the function).

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
No, still does not produce the effect.

must I specify image ID? but since the image only appears when mouseover, then it is nowhere in the html document...unless I were to preload it? Also, since by your function, we're passing in the source value, so once passed in, would it not be interpreted as :

{ document.getElementById("ifr").document.getElementById("img").'imagename.jpg' = 'imagename.jpg'; }

??

Thanks.

 
Upvote 0 Downvote
Here is a sample page:
Code: 
<!--    main.html    -->
<html>

<head>
<script type="text/javascript">
function setSource(src)
{  document.getElementById("ifr").document.getElementById("img").src = src;  }
</script>
</head>

<body>
<a onmouseover="setSource('imagename.jpg')"
href="[URL unfurl="true"]http://www.google.ca"[/URL] target="#IF1">Joe</a><br><br>
[red]<iframe id="ifr" src="image.html">Your browser doesn't support iframes!</iframe>[/red]
</body>
</html>
Code: 
<!--    image.html   -->
<html>
<body>
<img id="img" src="default.jpg">
</body>
</html>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
When I run the code you gave me...
the yellow 'road sign' pops up in the status bar and says..

Line: 8
Char : 4
Error :
'document.getElementById(...).document.getElementById(...)' is null or not an object
Code :
URL : file://C:\IFRAME.html

(end)

Now do we have to remove the quotations from inside the ID-brackets? I'll try it.
 
Upvote 0 Downvote
Code: 
<!--  main.html (tested in Firefox 1.0)  -->
<html>

<head>
<script type="text/javascript">
function setSource(src)
{
  var i = frames["ifr"];
  var img = i.document.getElementById("img");
  img.src = src;
}
</script>
</head>

<body>
<a onmouseover="setSource('imgae.jpg')"
href="[URL unfurl="true"]http://www.google.ca"[/URL] target="#IF1">Joe</a><br><br>
<iframe name="ifr" id="ifr" src="image.html">Your browser doesn't support iframes!</iframe>
</body>
</html>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
Hey chessbot

Your new code took care of the last error..but now there is another..i've isolated it on line 21, here that line of code :

<a onmouseover="setSource('imagename.jpg')" href=" target="#IF1">Joe</a><br><br>

and the error says this:

Line : 21
Char : 1
Error : Object expected.
Code : 0

Thanks.
 
Upvote 0 Downvote
What browser?

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
This code exactly works for me in IE6 and Firefox

main.html
Code: 
<!--    main.html    -->
<html>

<head>
<script type="text/javascript">
function setSource(src)
{
  var i = frames["ifr"];
  var img = i.document.getElementById("img");
  img.src = src;
}
</script>
</head>

<body>
<a onmouseover="setSource('dodongo.bmp')"
href="[URL unfurl="true"]http://www.google.ca"[/URL] target="#IF1">Joe</a><br><br>
<iframe name="ifr" id="ifr" src="image.html">Your browser doesn't support iframes!</iframe>
</body>
</html>
image.html
Code: 
<html>
<body>
<img id="img" src="link.bmp">
</body>
</html>

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.
 
Upvote 0 Downvote
Works well.

No errors.

Thank you!

Since you did this favour for us, my partner is offering some graphic work in return.
Contact : webmaster@timbermedia.com

Thanks again.
Cheers.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
799
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
916
xwb
xwb
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
800
berkshirea
berkshirea
MDGarcia
  • Locked
  • Question
Connection to ORACLE from OutSystems
Replies
0
Views
238
MDGarcia
MDGarcia
bach1
  • Locked
  • Question
How to get value from popup window to parent window by clicking from database selection?
Replies
2
Views
333
Offera
Offera

Part and Inventory Search

Sponsor

Back
Top