меняющиеся картинки внутри одного Html документа

strekoza · 24.06.2005, 22:24

ребятки, подскажите как сделать так, чтоб изменять путем нажатия на картинку эту или другую картинку в уже существующем Html документе

Constantine · 24.06.2005, 23:41

JavaScript... Под рукой ни чего сейчас нет, но там, где ты это видела, всегда можно разжиться подходящим скриптом

Ostgur · 25.06.2005, 00:11

Код:

 <img src="*.jpg" onClick="this.src='*.jpg'" ">

- для самозамены!

Код:

 <img src="*.jpg" name="picture"">
<img src="random.jpg" onClick="picture.src='*.jpg'" ">

- для замены картинки с именем picture!

KidsKilla · 25.06.2005, 12:25

проще:

<img src="my.gif" onclick="if(!x){this.wsrc=this.src; this.src='other.gif';} else {this.src=this.wsrc} x=!x">

типтого.. ток там сразу смена туда-обратно, а если ток туда:
<img src="my.gif" onclick="this.src='other.gif'">

strekoza · 26.06.2005, 04:52

Ребят, а вот если у меня есть картинка и две кнопочки-назад и вперед, КАК ДЕЛАТЬ ЗАМЕНУ КАРТИНОК В ОДНОМ HTML с помощью этих кнопок?
KidsKila тебе отдельное спасибо

KidsKilla · 27.06.2005, 18:08

ищи
getElementById()
и юзай

petrush · 04.07.2005, 17:12

Держи код
Это что-то типа слайдшоу
Тут есть и вперед и назад и автомат. просмотр загруженных картинок

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
<!--
.text{font-family:Verdana;font-size:18px;color:#fffff0}
#x a:link{font-family:Verdana;font-size:18px;color:#fffff0;text-decoration:none}
#y a:visited{font-family:Verdana;font-size:18px;color:#fffff0;text-decoration:none}
#z a:hover{font-family:Verdana;font-size:18px;color:#00ff00;text-decoration:none}
//-->
</style>


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

intro=new Image();
intro.src='ntro.gif';                                  //здеся картинка заставки              
pics=new Array ('a.gif','b.gif','c.gif')                //здеся картинки для слайдшоу собс-но 
hrefs=new Array('img/a.gif','img/b.gif','img/c.gif')
speed=2000;                                            //скорость слайдшоу- 1000 = 1 секунде!                         


//тут лучше ниче не менять :)
load=new Array();
for(i=0; i < pics.length; i++)
 {
 load[i]=new Image();
 load[i].src=pics[i];
 }
ns=(document.layers);
n6=(document.getElementById&&!document.all);
ie=(document.all);
count=-1;
move=1;
chck=null;
timer=null;
vvv='0';
function Picnum(){
var d=(ns||ie)?'document.':'document.getElementById("';
var a=(ns||n6)?'':'all.';
var n6r=(n6)?'")':'';
var p=eval(d+a+'Nums'+n6r);
if (ie||n6)
p.innerHTML='Picture '+hrefs[count];
if (ns){
 p.document.write("<div style='position:absolute;top:0px;left:0px;font-family:Verdana;font-size:18px;color:#fffff0;text-align:center'>Picture "+count+"</div>");
 p.document.close();
 }
}
function ManualForward(){
 if (chck==1){ 
 count+=move
 if (count >= pics.length) count=0;
 document.images.slides.src=pics[count];
 document.links[0].href=hrefs[count];
 Picnum();
 }
}
function ManualReverse(){
 if (chck==1){
 count-=move
 if (count < 0) count=pics.length-1;
 document.images.slides.src=pics[count];
 document.links[0].href=hrefs[count];
 Picnum();
 }
}
function Pause(){
 chck=1;
 count=count;
 clearTimeout(timer)
 Picnum();
}
function AutoCycle(){
 count+=move
 if (count >= pics.length) count=0;
 document.images.slides.src=pics[count];
 document.links[0].href=hrefs[count];
 Picnum();
 timer=setTimeout('AutoCycle()',speed)
}
function Cycle(){
if (chck==1) AutoCycle();
chck=null;
}
//-->
</script>

</head>
<body onLoad="setTimeout('AutoCycle()',2000)"> 
<center>
<table width="250" border="1" cellpadding="0" cellspacing="4">
<tr>
<td valign="middle" align="center" bgcolor="#c0c0c0">
<span class="text" style="position:relative">Slide Show</span>
<br>
<span id="Nums" class="text" style="position:relative">&nbsp;</span>
</td>
</tr>
<tr>
<td height="250" valign="middle" align="center">
<a href="#" name="anch"><img src="intro.gif" name="slides" border="0" onmouseenter="Pause()" onmouseout="Cycle()"></a>
</td>
</tr>
<tr>
<td height="40" valign="middle" align="center" bgcolor="#c0c0c0">
<span id="x"><span id="y"><span id="z">
<a href="javascript:ManualReverse()"> << </a>
<a href="javascript:Pause()">Pause</a> 
<a href="javascript:ManualForward()"> >> </a>
<a href="javascript:Cycle()">Auto</a> 
</span></span></span>
</td>
</tr>
</table>
</center>

</body>
</html>

Не забудь токо создать папку img и положить в нее 3 картинки 'a.gif','b.gif','c.gif'

Все. Удачи.