برای تغییر یک تصویر با onclick دریک loop با جاوااسکریپت نوشته ام , حالا میخواهم کل این action را برای تعداد35 متغیر توسط یک آرایه ( رشته عددی ) درست کنم. احتیاج به راهنمایی دارم. فایل را ضمیمه کرده
ام
<!DOCTYPE html>
<html>
<head>
<script>
var counter = 0
lightbox = ["images/graycircle.png" , "images/greencircle.png" , "images/redcircle.png"],
rotateimage = function () {document.getElementById("checkbox").src = lightbox[counter];
counter++;
if (counter >= lightbox.length) {
counter = 0;
}
}
</script>
</head>
<body>
<p style="text-align:center">
<table style="text-align:center;width:100%;padding-top:34px;padding-left:50px;padding-right:50px;color:white">
<tr style="background-color:#000066">
<th style="padding:8px">IN PUT</th>
</tr>
</table>
<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
<tr style="background-color:#000099">
<td style="padding:8px">A1
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A2
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A3
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A4
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A5
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A6
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
<td style="padding:8px">A7
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A8
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A9
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A10
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A11
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A12
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
<td style="padding:8px">A13
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A14
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A15
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A16
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A17
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A18
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
</tr>
</table>
<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
<tr style="background-color:#0000CC">
<td style="padding:8px">A1
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A2
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
<td style="padding:8px">A3
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A4
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
<td style="padding:8px">A5
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A6
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
</tr>
</table>
<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
<tr style="background-color:#0000FF">
<td style="padding:8px">A1
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
<td style="padding:8px">A2
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
</tr>
</table>
<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
<tr style="background-color:#336600">
<th style="padding:8px">OUT PUT</th>
</tr>
</table>
<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
<tr style="background-color:#00CC00">
<td style="padding:8px">A1
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A2
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
<td style="padding:8px">A3
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
<br>A4
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
</tr>
</table>
<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
<tr style="background-color:#00CC33">
<td style="padding:8px">A1
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
<td style="padding:8px">A2
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
<td style="padding:8px">A3
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
</tr>
</table>
<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
<tr style="background-color:#00CC66">
<td style="padding:8px">A1
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
</tr>
</table>
<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
<tr style="background-color:#00CC66">
<td style="padding:8px">A1
<img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
</td>
</tr>
</table>
</p>
<!--
<p style="text-align:center;font-family:tahoma;color:white;background-color:blue;margin:50px;padding:34px;">
CONTROL LED: ON
<br><br>
<a href="Onpage.html"><button id="Bon" style="color:green;background-color:orange;text-align:center;border:none;width:50px;">ON</button></a>
<a href="Offpage.html"><button id="Boff" style="color:orange;background-color:green;text-align:center;border:none;width:50px;">OFF</button></a><br />
</p>
-->
</body>
</html>
سلام دوست من
lightbox = ["images/graycircle.png" , "images/greencircle.png" , "images/redcircle.png"],
var modify = document.getElementById("checkbox");
for(var i = 0; i < 35; i++) {
modify.src = lightbox[i];
}چون گفته بودید 35 تا عکس دارین این حلقه باید 35 بار گردش کنه، کد بالا رو می تونین استفاده کنید که برای یک img چندین تصویر نمایش بدین
موفق باشین :)
آقای شعبانی عزیز ، ممنون از جوابی که دادین و راهنماییتون ، ولی منظور من این بود که این سه تصویر که با onclick با هم جایگزین مشن ( در واقع نشان on . Off . Disable هستند ) باید در این صفحه برای ۳۵ گزینه ، به همان شکل عمل کنند. یعنی فانکشن onclick که برای img شماره ۱ نوشته شده باید به ترتیب برای ۳۵ مورد دیگر همانطور عمل کند.
هیچ کاربری تا کنون از این پست تشکر نکرده است
با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)