PDA

View Full Version : onclick script



Polwenor
08-19-2011, 11:21 PM
I need the following script
pressing the button (or link)
images a.gif, b.gif c.gif and d.gif
replaced by x.gif

a.gif -> x.gif
b.gif -> x.gif
c.gif -> x.gif
d.gif -> x.gif

ggalan
08-19-2011, 11:48 PM
take a look here http://www.dynamicdrive.com/forums/showthread.php?t=60329

Polwenor
08-20-2011, 06:03 PM
----- my script at the moment -----

<head>
<script language="JavaScript">
<!--
function nph_change_img_src(name, nsdoc, rpath)
{
var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
if (name == '') return;
if (img) { img.altsrc = img.src; img.src = rpath; }
}
// -->
</script>
<title></title>

</head>

<p><img src="background.gif" border="0" name="nph_slide1" width="700" height="158"></p>


<p>&nbsp;</p>
<p><a href="javascript:location.reload(true)">Refresh</a>
- <a href="#">Clear</a>
</p>
<div id="layer1" style="width:243px; height:182px; position:absolute; left:0px; top:0px; z-index:1;">
<p><img src="a.gif" onclick="this.src='x.gif' " width="243" height="182"></p>
</div>

<div id="layer2" style="width:243px; height:182px; position:absolute; left:243px; top:0px; z-index:1;">
<p><img src="b.gif" onclick="this.src='x.gif' " width="243" height="182"></p>
</div>

<div id="layer3" style="width:243px; height:182px; position:absolute; left:486px; top:0px; z-index:1;">
<p><img src="c.gif" onclick="this.src='x.gif' " width="243" height="182"></p>
</div>

---------------

link Clear (<a href="#">Clear</a>) must
replace a.gif, b.gif, c.gif
one click x.gif

Polwenor
08-22-2011, 07:12 PM
I got the script to work !

ggalan
08-23-2011, 04:46 PM
can you share what you did please

Polwenor
08-28-2011, 01:39 PM
.....simple picture game for vilage party......

<script language="JavaScript">
<!--
function nph_change_img_src(name, nsdoc, rpath)
{
var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
if (name == '') return;
if (img) { img.altsrc = img.src; img.src = rpath; }
}
// -->
</script>
<script type="text/javascript">
function changeimage(img, new_src)
{
var cur_src = img.src.substring(img.src.lastIndexOf("/")+1);

if (cur_src == new_src) {
img.src = img.old_src;
} else {
img.old_src = cur_src;
img.src = new_src;
}
}
</script>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="trasp.gif" border="2" name="nph_slide17" width="933" height="700"></p>
<div id="layer1" style="width:243px; height:182px; position:absolute; left:20px; top:-20px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="01.gif" width="243" height="182" name="nph_slide1"></p>
</div>
<div id="layer2" style="width:243px; height:182px; position:absolute; left:263px; top:-20px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="02.gif" width="243" height="182" name="nph_slide2"></p>
</div>
<div id="layer3" style="width:243px; height:182px; position:absolute; left:506px; top:-20px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="03.gif" width="243" height="182" name="nph_slide3"></p>
</div>
<div id="layer4" style="width:243px; height:182px; position:absolute; left:749px; top:-20px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="04.gif" width="243" height="182" name="nph_slide4"></p>
</div>
<div id="layer5" style="width:243px; height:182px; position:absolute; left:20px; top:162px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="05.gif" width="243" height="182" name="nph_slide5"></p>
</div>
<div id="layer6" style="width:243px; height:182px; position:absolute; left:263px; top:162px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="06.gif" width="243" height="182" name="nph_slide6"></p>
</div>
<div id="layer7" style="width:243px; height:182px; position:absolute; left:506px; top:162px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="07.gif" width="243" height="182" name="nph_slide7"></p>
</div>
<div id="layer8" style="width:243px; height:182px; position:absolute; left:749px; top:162px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="08.gif" width="243" height="182" name="nph_slide8"></p>
</div>
<div id="layer9" style="width:243px; height:182px; position:absolute; left:20px; top:344px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="09.gif" width="243" height="182" name="nph_slide9"></p>
</div>
<div id="layer10" style="width:243px; height:182px; position:absolute; left:263px; top:344px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="10.gif" width="243" height="182" name="nph_slide10"></p>
</div>
<div id="layer11" style="width:243px; height:182px; position:absolute; left:506px; top:344px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="11.gif" width="243" height="182" name="nph_slide11"></p>
</div>
<div id="layer12" style="width:243px; height:182px; position:absolute; left:749px; top:344px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="12.gif" width="243" height="182" name="nph_slide12"></p>
</div>
<div id="layer13" style="width:243px; height:182px; position:absolute; left:20px; top:526px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="13.gif" width="243" height="182" name="nph_slide13"></p>
</div>
<div id="layer14" style="width:243px; height:182px; position:absolute; left:263px; top:526px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="14.gif" width="243" height="182" name="nph_slide14"></p>
</div>
<div id="layer15" style="width:243px; height:182px; position:absolute; left:506px; top:526px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="15.gif" width="243" height="182" name="nph_slide15"></p>
</div>
<div id="layer16" style="width:243px; height:182px; position:absolute; left:749px; top:526px; z-index:1;">
<p><img onclick="changeimage(this, 'trasp.gif')" src="16.gif" width="243" height="182" name="nph_slide16"></p>
</div>
<p align="center" style="margin-top:1; margin-bottom:1;"><span style="font-size:12pt;"><a href="javascript:nph_change_img_src('nph_slide1', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide2', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide3', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide4', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide5', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide6', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide7', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide8', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide9', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide10', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide11', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide12', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide13', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide14', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide15', 'document', 'trasp.gif');
javascript:nph_change_img_src('nph_slide16', 'document', 'trasp.gif');" title="TÜHJENDA"><img src="logo_tm.gif" border="0" alt="TÜHJENDA" align="absbottom" height="17" width="15"></a>&nbsp;<a href="javascript:location.reload(true)">Refresh</a>
-&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '01.jpg');">01</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '02.jpg');">02</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '03.jpg');">03</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '04.jpg');">04</a> - <a href="javascript:nph_change_img_src('nph_slide17', 'document', '05.jpg');">05</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '06.jpg');">06</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '07.jpg');">07</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '08.jpg');">08</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '09.jpg');">09</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '10.jpg');">10</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '11.jpg');">11</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '12.jpg');">12</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '13.jpg');">13</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '14.jpg');">14</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '15.jpg');">15</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '16.jpg');">16</a> -&nbsp;</span><a href="javascript:nph_change_img_src('nph_slide17', 'document', '17.jpg');"><span style="font-size:12pt;">17</span></a><span style="font-size:12pt;"> -&nbsp;</span><a href="javascript:nph_change_img_src('nph_slide17', 'document', '18.jpg');"><span style="font-size:12pt;">18</span></a><span style="font-size:12pt;"> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '19.jpg');">19</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '20.jpg');">20</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '21.jpg');">21</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '22.jpg');">22</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '23.jpg');">23</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '24.jpg');">24</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '25.jpg');">25</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '26.jpg');">26</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '27.jpg');">27</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '28.jpg');">28</a> -&nbsp;<a href="javascript:nph_change_img_src('nph_slide17', 'document', '29.jpg');">29</a></span></p>