[英]How to properly set id for individual mouseover buttons
I have a column of buttons that have to do the same thing as the first button but with there own individual pics. 我有一列按钮,它们的作用必须与第一个按钮相同,但是要有自己的个人照片。 How do I set the id so that there's no glitches? 我该如何设置ID以便不出现故障? Right now I have three buttons set up but they somehow copied the same name (they all say mobile quick wash)! 现在,我设置了三个按钮,但是它们以某种方式复制了相同的名称(它们都表示移动快速清洗)! Here is what I have so far http://ultimatefinishdetailing.com/Services.html 这是到目前为止我所拥有的http://ultimatefinishdetailing.com/Services.html
HTML: (posted HTML BEFORE on the image button) HTML :(在图像按钮之前发布HTML)
<STYLE MEDIA="screen" TYPE="text/css">
.pop-up {
height: 100px;
width: 100px;
margin-right: -100px;
margin-top: -100px;
position:absolute;
right:-50px;
top:75px;
}
.button {
width:300px;
height:21px;
display:block; background-image:url(images/button_ufad4.jpg);
position:absolute;
}
</style>
<a href="" class="button" onmouseover="javascript:ShowImage('images/InteriorandExteriorDetailing.jpg')" onmouseout="javascript:HideImage()"></a>
<div id="popup" class="pop-up">
<img id="popupImage" alt="" />
</div>
Javascript: Javascript:
<script type="text/javascript">
function ShowImage(src)
{
var img = document.getElementById('popupImage');
var div = document.getElementById('popup');
img.src = src;
div.style.display = "block";
}
function HideImage()
{
document.getElementById('popup').style.display = "none";
}
</script>
Figured it out! 弄清楚了! use different id's,classes, for every button. 为每个按钮使用不同的ID,类。 example below is of one button, change numbers of id's/classes for every other button 下面的示例是一个按钮,每隔一个按钮更改ID /类的数量
HTML: 1. the CSS (style)has to have it's own id EX:(.pop-up1,2,3,etc.; .button1,2,3,etc.) 2. the <A>
(anchor tag)has to have its own id and class EX:(ID=BUTTON1,2,3,etc; CLASS=button1,2,3,etc.) 3. the div tag <div>
has to have it's own id, class, image id EX:(DIV ID="popup1", CLASS="pop-up1",IMG ID="popupImage1 HTML:1. CSS(样式)必须具有自己的ID EX :(。pop-up1,2,3等; .button1,2,3等)2. <A>
(锚标记)必须具有自己的ID和类EX:(ID = BUTTON1,2,3等; CLASS = button1,2,3等)3. div标签<div>
必须具有其自己的ID,类,图像id EX:(DIV ID =“ popup1”,CLASS =“ pop-up1”,IMG ID =“ popupImage1
<STYLE MEDIA="screen" TYPE="text/css">
.pop-up1 {height: 100px;width: 100px;margin-right:-100px;margin-top:-100px;position:absolute;display:none;right:-50px;top: 75px;opacity:.7;z-index: 1}
.button1 {
width:300px;
height:21px;
display:block; background-image:url(images/button_ufad4.gif);
position:absolute;
}
.button1:hover { background-position:left 43px;
}
</STYLE>
<A ID="BUTTON1" HREF="" CLASS="button1" ONMOUSEOVER="javascript:ShowImage('images/ufad2servicesexteriorandinteriordetailing.gif')" ONMOUSEOUT="javascript:HideImage()"></A>
<DIV ID="popup1" CLASS="pop-up1">
<IMG ID="popupImage1">
</DIV>
Javascript: Javascript:
<script type="text/javascript">
function ShowImage(src)
{
var img= document.getElementById('popupImage1');
var div= document.getElementById('popup1');
img.src=src;
div.style.display="block";
}
function HideImage()
{ document.getElementById('popup1').style.display ="none";}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.