Using href=mailto link from an image in Javascript

Question

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>

Please provide some code. Even though we can grab it from the page we rather see the relevant code posted here. — Marcus, Nov 11 '11 at 17:36
@Koli Please embed the relevant code snippets into your question (not just link) — Bryan, Nov 11 '11 at 17:37
Could not reproduce... The picture changes when you click that mailto link but that's the expected behavior... Maybe you need to preload images to avoid the (blank) loading time each time you click... — acm, Nov 11 '11 at 17:40
To add to @Marcus, we like to see the relevant code *here* because that way all future readers of this question will be able read the question and understand, independent of whether your public link is still available or not (not to mention, once you fix your problem, that link won't help future users understand what the problem was originally) — Matt, Nov 11 '11 at 17:41

score 2 · Answer 1 · answered Nov 11 '11 at 17:43

2

Add this code:

$("a").bind("click", function(e) {
    e.stopPropagation();
});

answered Nov 11 '11 at 17:43

Abdul Munim

18,869
8
52
61

score 0 · Answer 2 · answered Nov 11 '11 at 17:54

Try this function:

function imgchanger(){  
    var x = Math.floor(Math.random()*11) //sets x to a random number between 1 and 10

    document.getElementById("html").style.backgroundImage = "url(files/" + x + ".jpg)";      
    document.getElementById("contact_name").style.visibility='hidden';
    document.getElementById("footer").style.visibility='hidden';
}

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.

After 10 change, i need to take bach the 1 image with the footer and name... thats why my code is so long. — Koli, Nov 11 '11 at 18:12
OK, add a counter, just after the function call: var i = 1; i++; — Kevin Anthony Oppegaard Rose, Nov 11 '11 at 19:10

score 0 · Accepted Answer · answered Nov 11 '11 at 17:56

0

a bit like what Munim Abdul said try you could add to stop propagation

       <a href="mailto:mail@mail.com;" onclick="event.stopPropagation();">

answered Nov 11 '11 at 17:56

david

4,218
3
23
25

Thanks a lot, this is solving everithing! – Koli Nov 11 '11 at 18:14

score -2 · Answer 4 · answered Nov 11 '11 at 17:39

-2

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.

answered Nov 11 '11 at 17:39

student

213
2
5

The problem is that, if you click to the mailto, the white background is coming. Thats what i dont understand. – Koli Nov 11 '11 at 17:47

Using href=mailto link from an image in Javascript

4 Answers4