在 Javascript 中使用 href=mailto 链接图像
我做了一个主页。如果您单击任意位置，则背景需要更改，除非您单击带有联系人的图片。如果您单击带有联系人的图片，则会发送一封邮件以获取电子邮件地址。
现在一切正常，唯一的问题是当我单击带有 a href mailto 的图片时，背景消失了。我不知道为什么它的工作方式不同，然后当我点击其他地方时.. 这是主页： http://staehelinmeyer.carolburri.com/
一些代码：
<script type="text/javascript">
var x=1; //store which picture to show
var MAX=10; //store how much picture is
var n=1; //count until 10
var y=x; //prevent to not put the same image after itself
function imgchanger(){ //changes the image
n++; //count until 10
x= Math.floor(Math.random()*(MAX-1))+2; //generate a random number between 2 and MAX
if(x==y){ //if its the same image like what was before
while(x==y){x= Math.floor(Math.random()*(MAX-1))+2;} //generate a new number
}
if(n==MAX){ //if its the MAX time of clicking
x=1; //show the first picture
n=1; //and begin the counting from one
}
//change the picture
document.getElementById("html").style.backgroundImage = "url(files/"+x+".jpg)";
if (x==1){ //if its the first picture show the footer and the contact
document.getElementById("contact_name").style.visibility='visible';
document.getElementById("footer").style.visibility='visible';
}
else{ //else hide the footer and the contact
document.getElementById("contact_name").style.visibility='hidden';
document.getElementById("footer").style.visibility='hidden';
}
y=x; //save what was the picture
}
</script>
<body onclick="imgchanger()">
<div id="page-wrap">
<div style="height:0px; position:fixed; top:30px; right:5px; background-color:#f0f0f0;">
<img alt="contact_name" id="contact_name" src="files/contact_name.png" />
<a href="mailto:[email protected]">
<img alt="contact" src="files/contact.png"/>
</a>
</div>
<div id="footer" class="footer">
Sample text
</div>
</div>
</body>
I made a homepage. If you click anywhere the background needed to be changed, except if you click in to the picture with contact. If you click in that picture with contact, a mail should send for an email-address.
Now everything is working, the only problem is when I click to the a picture with a href mailto the background disappear. I have no idea why it works differently, then when I click somewhere else..
Here is the hompage: http://staehelinmeyer.carolburri.com/
Some code:
<script type="text/javascript">
var x=1; //store which picture to show
var MAX=10; //store how much picture is
var n=1; //count until 10
var y=x; //prevent to not put the same image after itself
function imgchanger(){ //changes the image
n++; //count until 10
x= Math.floor(Math.random()*(MAX-1))+2; //generate a random number between 2 and MAX
if(x==y){ //if its the same image like what was before
while(x==y){x= Math.floor(Math.random()*(MAX-1))+2;} //generate a new number
}
if(n==MAX){ //if its the MAX time of clicking
x=1; //show the first picture
n=1; //and begin the counting from one
}
//change the picture
document.getElementById("html").style.backgroundImage = "url(files/"+x+".jpg)";
if (x==1){ //if its the first picture show the footer and the contact
document.getElementById("contact_name").style.visibility='visible';
document.getElementById("footer").style.visibility='visible';
}
else{ //else hide the footer and the contact
document.getElementById("contact_name").style.visibility='hidden';
document.getElementById("footer").style.visibility='hidden';
}
y=x; //save what was the picture
}
</script>
<body onclick="imgchanger()">
<div id="page-wrap">
<div style="height:0px; position:fixed; top:30px; right:5px; background-color:#f0f0f0;">
<img alt="contact_name" id="contact_name" src="files/contact_name.png" />
<a href="mailto:[email protected]">
<img alt="contact" src="files/contact.png"/>
</a>
</div>
<div id="footer" class="footer">
Sample text
</div>
</div>
</body>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
添加此代码：
Add this code:
有点像穆尼姆·阿卜杜勒所说的，尝试添加以阻止传播
a bit like what Munim Abdul said try you could add to stop propagation
尝试这个功能：
默认情况下，“contact_name”和“footer”元素应该是可见的。该代码生成一个 1 到 10 之间的随机数，然后隐藏您想要隐藏的两个元素，并且比您的代码小得多。
如果问题仍然存在，请再次评论，我会再看一下。
Try this function:
The "contact_name" and "footer" elements should be visible to start off with by default. This code produces a random number between 1 and 10 and then hides the two elements you want hidden and is much smaller than your code.
If the problem persists comment again here and I will have another look at it.
我测试了一下，看起来不错，但是当我点击mailto时，背景似乎是白色的，并且需要一些时间才能完全加载背景。
I tested it out, it seems fine, but it seems that the background was white when I clicked on the mailto and it took some time to load the background completely.