asked on

Changing source attribute dynamically for embedded <IMG> tags.

I have the following HTML code :

<BODY>

<DIV Id="whoarewe" style="HEIGHT: 21px; LEFT: 5px; POSITION: absolute; TOP: 18px;

VISIBILITY: visible; WIDTH: 32px; Z-INDEX: 1">
<IMG border="0" Name="whoarewe" src="static-ball2.gif">
</DIV>

<DIV Id="whoarewe2" Style="position:absolute; top: 16px; left: 42px; visible: visible;

z-index:1">
<A Href="Whoarewe.htm" Target="main-frame"><IMG Name="whoarewe2" Src="swhoarewe2.gif"

Border="0" Valign="top"></A>
</DIV>

<div id="portfolio" style="HEIGHT: 21px; LEFT: 5px; POSITION: absolute; TOP: 60px; VISIBILITY:

visible; WIDTH: 32px; Z-INDEX: 1">
<IMG border="0" Name="portfolio" src="static-ball2.gif" >
</div>

<DIV Id="portfolio2" Style="position:absolute; top: 59px; left: 40px; visibility: visible;

z-index:1">
<A Href="portfolio.htm" Target="main-frame">
<IMG Name="portfolio2" Src="sportfolio2.gif" Border="0" Valign="top"></A>
</DIV>

<DIV id="core-competence" style="HEIGHT: 21px; LEFT: 5px; POSITION: absolute; TOP: 117px;

VISIBILITY: visible; WIDTH: 32px; Z-INDEX: 1">
<IMG border="0" Name="core-competence" src="static-ball2.gif">
</DIV>

<DIV Id="core-competence2" Style="position:absolute; top: 117px; left: 40px; visibility:

visible; z-index:1">
<A Href="core-competence.htm" Target="main-frame"><IMG Name="core-competence2"

Src="score-competence2.gif" Border="0" Valign="top"></A>
</DIV>

</BODY>
I want to write an onClick function for each of the anchor tags such that the src of the image embedded within the link that is currently clicked is changed to "spinning-ball.gif" and the image-source of the last clicked link changes back to the original.

Example : If clicked Link A
Link A : Image-source = spinning-ball.gif AND
END IF
IF clicked Link B
Link A : Image-sorce = changes back to static-ball.gif AND
Link B : Image-source = spinning-ball.gif
END IF

nimaig

Try this, quite close to what you want :

<html>
<head>
<script language="javascript">
var imgObj = null;
var openImg = new Image();
openImg.src="open.gif";
var closeImg = new Image();
closeImg.src="close.gif";

function changeImage(imgName){
var newImgObj = document.images[imgName];
if(newImgObj){
if(imgObj) {
if(imgObj != newImgObj){
imgObj.src = closeImg.src;
newImgObj.src= openImg.src;
}
}else{
newImgObj.src= openImg.src;
}
}
imgObj = newImgObj;
}
</script>
</head>
<body>
<img src="close.gif" name="position_id1"> <a href="javascript:void(0)" target="" onClick="changeImage('position_id1')">link 1</a>

<img src="close.gif" name="position_id2"> <a href="javascript:void(0)" target="" onClick="changeImage('position_id2')">link 2</a>

<img src="close.gif" name="position_id3"> <a href="javascript:void(0)" target="" onClick="changeImage('position_id3')">link 3</a>
</body>
</html>

ahosang

Put this script in the head:

<script>
var activeOriginal="";
var active="";
function changeImgs(newImgName) {
if (active) {
active.src=activeOriginal;
}
if (document.all) {
active=document.images[newImgName];
activeOriginal=active.src;
active.src="button.gif";
return true
}
if (document.layers) {
active=document.layers[newImgName].document.images[newImgName];
}
if (document.getElementById) {
active=document.images[newImgName];
}
activeOriginal=active.src;
active.src="button.gif";
return true;
}
</script>

And in the links, put onclick="changeImgs('whoarewe2')" and so on for each link.

ahosang

where I have put active.src="button.gif" that should be:
active.src="spinning-ball.gif";

ahosang

Of course this could be shorter still:
<script>
var activeOriginal="";
var active="";
function changeImgs(newImgName) {
if (active) {
active.src=activeOriginal;
}
if (document.all||document.getElementById) {
active=document.images[newImgName];
}
if (document.layers) {
active=document.layers[newImgName].document.images[newImgName];
}
activeOriginal=active.src;
active.src="button.gif";
return true;
}
</script>

hjainu

<html>
<head>
<script language="javascript">
var count=0,c

function nothing()
{}

function abc(c)
{
if(c==1)
s1.src="still4.jpg"

if(c==2)
s2.src="still4.jpg"

if(c==3)
s3.src="still4.jpg"

if(count!=0)
{
if(count==1)
s1.src="still1.jpg"

if(count==2)
s2.src="still2.jpg"

if(count==3)
s3.src="still3.jpg"
}
count=c
}
</script>
</head>
<body>
<a href="javascript:nothing()">
<img id="s1" src="still1.jpg" onclick=abc(1) >
<a href="javascript:nothing()">
<img id="s2" src="still2.jpg" onclick=abc(2)></a>
<a href="javascript:nothing()">
<img id="s3" src="still3.jpg" onclick=abc(3)></a>
</body>
</html>

Replace the still1,still2,still3 by the names of your image
still4 is the image that you want to have spinning-ball.gif in this case and any url in your anchor tag

Michel Plungjan

May I please ask why you have your images in divs and absolutely positioned???
Makes it very hard to swap in all other browsers than IE...
Can't they just be in a table or even not in a table?

<BODY>
<IMG border="0" Name="whoarewe" vspace=5 hspace=5 src="static-ball2.gif"><A
Href="Whoarewe.htm" Target="main-frame"><IMG Name="whoarewe2" vspace=5 hspace=5
Src="swhoarewe2.gif" Border="0" Valign="top"></A><br>
<IMG border="0" Name="portfolio" vspace=5 hspace=5 src="static-ball2.gif" ><A
Href="portfolio.htm" Target="main-frame"><IMG Name="portfolio2" vspace=5 hspace=5
Src="sportfolio2.gif" Border="0" Valign="top"></A><br>
<IMG border="0" Name="core-competence" vspace=5 hspace=5 src="static-ball2.gif"><A
Href="core-competence.htm" Target="main-frame"><IMG Name="core-competence2"
Src="score-competence2.gif" vspace=5 hspace=5 Border="0" Valign="top"></A>
</BODY>

x666xchange

ASKER

Dear mplungjan,

So that I can arrange them in teh shape of an arc along the left border of the browser.

Michel Plungjan

Aha...
And Ahosang's code does not do the trick??

Michel

ASKER CERTIFIED SOLUTION

ahosang

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Changing source attribute dynamically for embedded &lt;IMG&gt; tags.

Changing source attribute dynamically for embedded <IMG> tags.