i have been scrolling for a solution for ages now and i cant seem to make it work.
i am trying to make some sort of library where u can hover on an icon while hovering it displays that image into image tag. as you can see from the image below my php statement returned 2 images at the left. and while hovering i want the hovered image to display in the big img tag. but hovering is not working.
Here is my javascript
<script type="text/javascript">
//imageview
$(document).ready(function loading(){
var getimg = document.getElementById("icoimg").getAttribute("src");
document.getElementById("selectedimg").src = getimg;
});
</script>
And here is my php mysqli while loop
$count = 1;
if($count <= 6){
while($row = mysqli_fetch_array( $query )) {
$imgcase = $row['Showcase_Image'];
$itemname = $row['Product_Name'];
$itemid = $row['Product_ID'];
echo "<div class='imgico' id='imgico'><img id='icoimg' name='icoimg' src=$imgcase onmouseover='loading();' /></div></br>";
$count++;
}
}
and this is the big img preview
<div class="imgprev" id="imgprev" width="460" height="300"><img id="selectedimg" width="460" height="300" /></div>
I have tried numerous tricks i tried inventing my own code. I searched all over the net but no luck. What i am thinking is MAYBE because the generated id's inside the tags have the same ID that maybe my img hover is useless. Maybe i need to find a way to get each generated id tags a unique id and call and then call that tag's id which should be "unique" in javascript and then apply the function? if so how? Any lifesaver that can help me? Thx in advance! Php and Javascript only..no CSS plz(unless its the only hope...lol)
EDIT: I did a "Hardcoding" and it worked but even tho its hardcoded i dont want it to work like this.I want to display max 5 images which is why i have a count function before my while loop in my php code. but if i cant find a better way i think im just going to stick with this unprofessional hardscript lol
if($count <= 6){
while($row = mysqli_fetch_array( $query )) {
$imgcase = $row['Showcase_Image'];
$itemname = $row['Product_Name'];
$itemid = $row['Product_ID'];
echo "<div class='imgico' id='imgico'><img id=$count name='icoimg' src=$imgcase onmouseover='loading$count();' /></div></br>";
$count++;
function loading1(){
var getimg = document.getElementById("1").getAttribute("src");
document.getElementById("selectedimg").src = getimg;
};
function loading2(){
var getimg = document.getElementById("2").getAttribute("src");
document.getElementById("selectedimg").src = getimg;
};
function loading3(){
var getimg = document.getElementById("3").getAttribute("src");
document.getElementById("selectedimg").src = getimg;
};
function loading4(){
var getimg = document.getElementById("4").getAttribute("src");
document.getElementById("selectedimg").src = getimg;
};
function loading5(){
var getimg = document.getElementById("5").getAttribute("src");
document.getElementById("selectedimg").src = getimg;
};
echo "<div class='imgico'><img name='icoimg' src=$imgcase onmouseover='loading(this);' /></div></br>";