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:mail@mail.com">
<img alt="contact" src="files/contact.png"/>
</a>
</div>
<div id="footer" class="footer">
Sample text
</div>
</div>
</body>
a bit like what Munim Abdul said try you could add to stop propagation