...

View Full Version : Change an image when you click on a link



SCSS
06-01-2005, 01:25 AM
Can someone help me out here. On my site (http://www.scss.tk) I would like to make it so when you click on a band member's name, it changes the can on the left hand side (in a frame) to a picture of them. So for example you click on Name1 and it changes the picture to images/name1.jpg But I would like to have it reset to the can when you leave the band page. Viewable in at least IE and preferably firefox too.. Thanks in advance!
PS Just saw the other post, not trying to double post, but i thought this was a bit different... And is it possible to double-click on the name to change the pic, instead of just a single click?

Astro-Boy
06-01-2005, 02:36 AM
Something like this should do the trick;


<img src="old.gif" name="changeMe">

<a href="#" onclick="return false" ondblclick="document.images['changeMe'].src='new.gif'">Change Image</a>

SCSS
06-01-2005, 02:43 AM
Will this work for frames too? because the can is in a frame to the side, and the names are in a different frame :) thanks for the reply too.

canadianjameson
06-01-2005, 02:53 AM
if it doesnt post the code, or atleast the frame names and image names

i've done it before so i know it works

SCSS
06-01-2005, 03:34 AM
Doesnt work :( Here's the code for the band page: (lots of stuff has been left out so it doesnt take up a few pages...)



<a href="#" onclick="return false" ondblclick="document.images['changeMe'].src='images/jordan.jpg'">Jordan:</a>


frame stuff with names:


<frameset rows="38%,*" border="0">
<frame name="switch" src="switch.html" frameborder="0" noresize>
<frameset cols="62%,*" border="0">
<frame name="main" src="main.html" frameborder="0" noresize>
<frame name="can" src="can.html" frameborder="0" noresize>
</frameset>
</frameset>


can frame:


<img src="images/can.jpg" name="changeMe">


Also, will the image change back when you leave the band page? if not, how can I make it that way?

canadianjameson
06-01-2005, 08:02 AM
I would do something like this:



<img src="images/can.jpg" id="changeMe">

...
<a href="#" onclick="return false" ondclick="document.getElementByID(changeMe).src='images/jordan.jpg'">Jordan:</a>


that may not work but its late and i'm tired... we'll look at it in the morn

SCSS
06-01-2005, 10:30 PM
Tried it, but no cigar... I get a "changeMe is undefined" error... Any ideas?
EDIT I only get this error when using ondblclick="blahblahblah" nothing happens with ondclick="blahblahblah"

marshallhansen
06-01-2005, 10:34 PM
getElementById('changeme')

don't forget the quotes

SCSS
06-01-2005, 10:52 PM
haha I just noticed that too! But now i get "Error: object doesn't support this property or method."
Hmm

marshallhansen
06-01-2005, 11:03 PM
Hm...the only thing i see is that you have a typo..

ondclick="document.getElementByID(changeMe)....

onclick=....

don't know if copied this straight from your code, that could be it

SCSS
06-01-2005, 11:08 PM
Here's the thing:


<a href="#" onclick="return false" ondclick="document.getElementByID('changeMe').src='images/jordan.jpg'">Jordan:</a>


When I use that, nothing happens when I double click.

When I use this:

<a href="#" onclick="return false" ondblclick="document.getElementByID('changeMe').src='images/jordan.jpg'">Jordan:</a>


I get the error when I double click. am i missing something?

marshallhansen
06-01-2005, 11:16 PM
Try..

<a href="#" ondblclick="return false;document.getElementByID('changeMe').src='images/jordan.jpg'">Jordan:</a>

To be honest i've never done an image swap using this method, however, it does look like it should work. I have always used the javascript method that someone suggested at the beginning using the name property.

SCSS
06-02-2005, 12:40 AM
Again, it doesnt work. I even tried using onClick instead of ondblclick, but still nothing. Any other ideas guys?

canadianjameson
06-02-2005, 12:49 AM
hehe you know what really aggravates me... i know the solution is simple!

just so i get it right.
- you want to onclick open a link and change a picture
- you want the picture to revert back when you...?

SCSS
06-02-2005, 01:29 AM
Well onclick or ondblclick. Either way, yes thats exactly what I want to do. I aswell have a feeling that its gonna be a really simple solution, but sometimes theyre the hardest to come up with!

canadianjameson
06-02-2005, 01:48 AM
its so aggravating because this code should work:



<body>
<img id="change" src="images/can.jpg">

<a href="#" onClick="document.getElementByID('change').src='images/jordan.jpg';">test</a>
</body>

and having it revert back to the can.jpg when they leave is also simple enough.

i feel so peasant-like not being able to answer this

i've also been scouring the search and i can't figure out whats wrong

Basscyst
06-02-2005, 02:02 AM
CJ, you are just forgetting that the frame you are clicking in, is a sibling of the target frame, and that frames are part of the window object, not the document object. So it should look like this:



<a href="#" onclick="return false" ondblclick="parent.frames['can'].document.images['changeMe'].src='./images/jordan.jpg'">Jordan:</a>


Basscyst

SCSS
06-02-2005, 02:05 AM
****TY! it doesnt work. It works when i test it in coffeecup (locally) but when i put it on my website (see it at www.scss.tk (http://www.scss.tk)) I get the error: 'parent.frames.can.document' is null or not an object. what the hell?

canadianjameson
06-02-2005, 03:32 AM
k, SCSS... paste the entire code here for the band window and the can window and we'll get it working

the problem is most probably just a naming issue

oh, and to have it revert back to the coke can if people leave the band frame... just use something like this on all other pages



<script language="JavaScript">
function resetCan() {
if (parent.frames['can'].document.images['changeMe'].src != './images/can.jpg')

{
parent.frames['can'].document.images['changeMe'].src = './images/can.jpg';
}
</script>

</head>
<body onload="resetCan()">
...

SCSS
06-02-2005, 04:31 AM
The ENTIRE code? Well, if you insist :D
Band:


<html>
<head>
<title>((`.Spiked|Cola|And|Seductive|Switchblades.))</title>
<!-- start extras -->
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- start no right clicking script -->
<script>
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
</script>
<!-- end no right clicking script -->
<!-- start popup script -->
<script language="javascript" type="text/javascript">
var popupwindow=null;
function popup(mypage,myname,w,h,pos,infocus){
if (pos == 'random')
{leftposition=(screen.width)?math.floor(math.random()*(screen.width-w)):100;topposition=(screen.height)?math.floor(math.random()*((screen.height-h)-75)):100;}
else
{leftposition=(screen.width)?(screen.width-w)/2:100;topposition=(screen.height)?(screen.height-h)/2:100;}
settings='width='+ w + ',height='+ h + ',top=' + topposition + ',left=' + leftposition + ',scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';popupwindow =window.open('',myname,settings);
if(infocus=='front'){popupwindow.focus();popupwindow.location=mypage;}
if(infocus=='back'){popupwindow.blur();popupwindow.location=mypage;popupwindow.blur();}
}
</script>
<!-- end popup script -->
<!-- end extras -->
</head>
<body>
<center>
<table width="85%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
<center>
<font size="-1">
<i>
Double-click each person's name to see a picture of them
</i>
</font>
</center>
<br>
<h3><a href="#" onclick="return false" ondblclick="parent.frames['can'].document.images['changeMe'].src='./images/jordan.jpg'">Jordan:</a></h3>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <font class="answer">Jordan Joseph Skoblenick</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Birthday: <font class="answer">July 4<sup>th</sup>, 1990</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Age: <font class="answer">Figure it out yourself, dammit</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Instrument: <font class="answer">Tama Swingstar Drums</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Favourite Food: <font class="answer">Pizza</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Favourite Drink: <font class="answer">Vanilla Coke</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inspired By: <font class="answer">Blink 182, Something Fatal, Sum 41, Green Day, The Virus, Aerosmith, Linkin Park, Limp Bizkit, Chaser (RIP), Rise Against, Papa Roach, Atreyu, Alexisonfire, 36CrazyFists</font>
<br>
<br>
<h3><a href="#" onclick="return false" ondblclick="parent.frames['can'].document.images['changeMe'].src='./images/steven.jpg'">Steven:</a></h3>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <font class="answer">Steven Donald Haggith</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Birthday: <font class="answer">December 11<sup>th</sup>, 1989</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Age: <font class="answer">Figure it out yourself, dammit</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Instrument: <font class="answer">B.C. Rich Platinum Series Guitar</a></font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Favourite Food: <font class="answer">Chicken Parmesan</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Favourite Drink: <font class="answer">Whiskey</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inspired By: <font class="answer">The Clash, Blink 182, The Ramones, Something Fatal, Atreyu, Alexisonfire</font>
<br>
<br>
<h3><a href="#" onclick="return false" ondblclick="parent.frames['can'].document.images['changeMe'].src='./images/dylan.jpg'">Dylan</a></h3>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Full Name: <font class="answer">Dylan John Astles</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Birthday: <font class="answer">September 25<sup>th</sup>, 1989</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Age: <font class="answer">Figure it out yourself, dammit</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Instrument: <font class="answer">Godin Guitar</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Favourite Food: <font class="answer">Candy</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Favourite Drink: <font class="answer">Anything with alcohol</font>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inspired By: <font class="answer">Boxcar Racer, Blink 182, Senses Fail, Silverstien, Greenday, Pink Floyd</font>
</td>
</tr>
</table>
</center>
</body>
</html>


And the can page:


<html>
<head>
<title>((`.Spiked|Cola|And|Seductive|Switchblades.))</title>
<!-- start extras -->
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- start no right clicking script -->
<script>
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
</script>
<!-- end no right clicking script -->
<!-- end extras -->
</head>
<body marginwidth="0" marginheight="0" style="margin: 0">
<center>
<img src="images/can.jpg" id="changeMe">
</center>
</body>
</html>

canadianjameson
06-02-2005, 04:56 AM
...

could you please also post whatever index.html you have all your frames in as well as that top frame... i can't get a 3-frame page working with two frames and no index :D

so u knows, had you not have hidden all your source i prolly could have had this done :o

also please attach the can and the pic of mr Skoblenuts so i can make sure it works

SCSS
06-02-2005, 10:56 PM
Hah sorry its been a while, had to go to school. My index page has a link for the popup which loads index2 (my site) and all the nav stuff is in the top frame. Heres the index page:


<html>
<head>
<title>((`.Spiked|Cola|And|Seductive|Switchblades.))</title>
<!-- start extras -->
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- start scroller script -->
<script language="JavaScript">
var Message="((`.Spiked|Cola|And|Seductive|Switchblades.))";
var place=1;
function scrollIn() {
window.status=Message.substring(0, place);
if (place >= Message.length) {
place=1;
window.setTimeout("scrollOut()",300);
} else {
place++;
window.setTimeout("scrollIn()",50);
}
}
function scrollOut() {
window.status=Message.substring(place, Message.length);
if (place >= Message.length) {
place=1;
window.setTimeout("scrollIn()", 100);
} else {
place++;
window.setTimeout("scrollOut()", 50);
}
}
</script>
<!-- end scroller script -->
<!-- start no right click script -->
<script language=JavaScript>
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
</script>
<!-- end no right click script -->
<!-- start popup script -->
<script language="javascript" type="text/javascript">
var popupwindow=null;
function popup(mypage,myname,w,h,pos,infocus){
if (pos == 'random')
{leftposition=(screen.width)?math.floor(math.random()*(screen.width-w)):100;topposition=(screen.height)?math.floor(math.random()*((screen.height-h)-75)):100;}
else
{leftposition=(screen.width)?(screen.width-w)/2:100;topposition=(screen.height)?(screen.height-h)/2:100;}
settings='width='+ w + ',height='+ h + ',top=' + topposition + ',left=' + leftposition + ',scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';popupwindow =window.open('',myname,settings);
if(infocus=='front'){popupwindow.focus();popupwindow.location=mypage;}
if(infocus=='back'){popupwindow.blur();popupwindow.location=mypage;popupwindow.blur();}
}
</script>
<!-- end popup script -->
<!-- end extras -->
</head>
<body onLoad="scrollIn();">
<center>
<br>
<br>
<pre>
____ _ _ _ ____ _ _ _
/ ___| _ __ (_) | _____ __| | / ___|___ | | __ _ / \ _ __ __| |
\___ \| '_ \| | |/ / _ \/ _` | | | / _ \| |/ _` | / _ \ | '_ \ / _` |
___) | |_) | | < __/ (_| | | |__| (_) | | (_| | / ___ \| | | | (_| |
|____/| .__/|_|_|\_\___|\__,_| \____\___/|_|\__,_| /_/ \_\_| |_|\__,_|
|_|
____ _ _ _
/ ___| ___ __| |_ _ ___| |_(_)_ _____
\___ \ / _ \/ _` | | | |/ __| __| \ \ / / _ \
___) | __/ (_| | |_| | (__| |_| |\ V / __/
|____/ \___|\__,_|\__,_|\___|\__|_| \_/ \___|

____ _ _ _ _ _ _
/ ___|_ _(_) |_ ___| |__ | |__ | | __ _ __| | ___ ___
\___ \ \ /\ / / | __/ __| '_ \| '_ \| |/ _` |/ _` |/ _ \/ __|
___) \ V V /| | || (__| | | | |_) | | (_| | (_| | __/\__ \
|____/ \_/\_/ |_|\__\___|_| |_|_.__/|_|\__,_|\__,_|\___||___/
</pre>
<a href="#" onClick="javascript:popup('index2.html','index2','700','520','center','front');">
<font size="-2">
---------> Enter <---------
</font>
</a>
<br>
<br>
<br>
<script src="news.js">
</script>
<br>
<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="jordan011sk@hotmail.com">
<input type="hidden" name="item_name" value="SCSS">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="CAD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="CA">
<input type="image" src="images/paypal.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
</form>
</center>
</body>
</html>


And the index2 page with the frame info:


<html>
<head>
<title>((`.Spiked|Cola|And|Seductive|Switchblades.))</title>
<!-- start extras -->
<meta http-equiv="imagetoolbar" content="no">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- start scroller script -->
<script language="JavaScript">
var Message="((`.Spiked|Cola|And|Seductive|Switchblades.))";
var place=1;
function scrollIn() {
window.status=Message.substring(0, place);
if (place >= Message.length) {
place=1;
window.setTimeout("scrollOut()",300);
} else {
place++;
window.setTimeout("scrollIn()",50);
}
}
function scrollOut() {
window.status=Message.substring(place, Message.length);
if (place >= Message.length) {
place=1;
window.setTimeout("scrollIn()", 100);
} else {
place++;
window.setTimeout("scrollOut()", 50);
}
}
</script>
<!-- end scroller script -->
<!-- start no right clicking script -->
<script>
var message="";
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
</script>
<!-- end no right clicking script -->
<!-- end extras -->
</head>
<frameset rows="38%,*" border="0">
<frame name="switch" src="switch.html" frameborder="0" noresize>
<frameset cols="62%,*" border="0">
<frame name="main" src="main.html" frameborder="0" noresize>
<frame name="can" src="can.html" frameborder="0" noresize>
</frameset>
</frameset>
<body marginwidth="0" marginheight="0" style="margin: 0" onLoad="scrollIn();">
</body>
</html>


All the nav info is in the "switch" frame

pics are attached. sry dont have one of me, only one of the guitarist so i renamed it jordan.JPG :D

SCSS
06-03-2005, 01:46 PM
bumpp

canadianjameson
06-03-2005, 02:42 PM
okay this is sorta weird.

it works on my system.
http://www.enviromark.ca/jay/help/index.html

and what i did shouldn't have had any impact on anything. i moved the files around and did this:


<a href="#" onclick="return false" ondblclick="parent.frames['can'].document.images['changeMe'].src='jordan.jpg'">Jordan:</a>

anywhoo, give it a shot. try just making the link 'images/jordan.jpg' and not ./images...

also lemme know if my script for changing the can back doesnt' work

SCSS
06-05-2005, 06:26 PM
IVE GOT IT! After examining your site, I copied you and moved can.jpg to the root directory, instead of in "images/" and now it works! and instead of putting your script on every other page, i just used <body onUnload="parent.frames['can'].document.images['changeMe'].src='can.jpg'">
THANKS SO MUCH!

canadianjameson
06-05-2005, 08:51 PM
anytime :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum