[英]php img hover and display into a different img tag
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.
正如您从下面的图像中看到的那样,我的php语句在左侧返回了2张图像。 and while hovering i want the hovered image to display in the big img tag.
并且在悬停时,我希望将悬停的图像显示在大img标签中。 but hovering is not working.
但徘徊不起作用。
Here is my javascript 这是我的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 这是我的php mysqli while循环
$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 这是img的大预览
<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.
我在想的是可能是因为标签中生成的ID具有与我的img悬停相同的ID。 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?
也许我需要找到一种方法来获取每个生成的ID标记的唯一ID并调用,然后调用该标记的ID(在JavaScript中应为“唯一”),然后应用该功能? 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)
仅PHP和Javascript..no CSS plz(除非唯一希望...大声笑)
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. 编辑:我做了一个“硬编码”,它的工作,但即使它的硬编码,我也不希望它像这样工作。我想显示最多5张图片,这就是为什么在我的php代码中的while循环之前我有一个count函数的原因。 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>";
You can't use the id as the selector to get the img, because it is supposed to be unique. 您不能将id用作获取img的选择器,因为它应该是唯一的。
Instead, in your javascript, you can pass a reference to the element that called the loading() function : 相反,在您的javascript中,您可以传递对称为loading()函数的元素的引用:
echo "<div class='imgico'><img name='icoimg' src=$imgcase onmouseover='loading(this);' /></div></br>";
<script type="text/javascript">
//imageview
$(document).ready(function loading(elm){
var getimg = elm.getAttribute("src");
document.getElementById("selectedimg").src = getimg;
});
</script>
Well my page works now. 好了,我的页面现在可以正常工作了。 The answer i received from Galcha was the first thing i ever used so it didnt really help.
我从Galcha收到的答案是我使用过的第一件事,因此它并没有真正的帮助。 after some thinking i decided to replace
$(document).ready(function loading(elm)
with function loading(elm)
. So my script looks like this now 经过一番思考后,我决定将
$(document).ready(function loading(elm)
替换为function loading(elm)
。所以我的脚本现在看起来像这样
function loading(elm){
var getimg = elm.getAttribute("src");
document.getElementById("selectedimg").src = getimg;
}
Now after using this the hover works perfect. 现在,使用此功能后,悬停效果非常好。 BUT it does not auto display the first image on page load.
但是它不会在页面加载时自动显示第一张图像。 So i modified my while statement a bit and now it looks like this.
所以我修改了while语句,现在看起来像这样。
$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'><img name='icoimg' src=$imgcase onmouseover='loading(this);' /></div></br>";
if($count <= 1){
$imgfirst = $imgcase;
}
$count++;
}
}
Now my page works perfectly. 现在,我的页面运行完美。 Incase you ask why i have a count <1 statement in my while loop?
如果您问为什么我的while循环中有count <1条语句? Because if i just echo the $imgcase in the selectedimg src code i will get the last image src autodisplayed.
因为如果我只是在selectedimg src代码中回显$ imgcase,我将自动显示最后一个图像src。 And i wanted the first one.
我想要第一个。 Thats why i made a count <=1 to get the first link and give the first link a seperate variable and echo's $imgfirst in the selectedimg src.
那就是为什么我进行计数<= 1以获得第一个链接,并给第一个链接一个单独的变量,然后在selectedimg src中回显$ imgfirst的原因。
My code is a bit scrappy but...it works i guess lol. 我的代码有点杂乱无章,但是...我猜它能奏效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.