Ignorere klikk på en <div>

#D4AF37

18. juli 2013

(trådtittel er kanskje litt mongo...)

Jeg har et lite problem i webutvikler-land.
Jeg har to bilder som ligger oppå hverandre inni hver sin div.

Kode

<style>
#container{width:200px;height:200px;border:2px solid black;position:fixed;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}
#pic1{width:100px;height:100px;position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-50px;}
#pic2{width:100px;height:100px;position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-50px;}
</style>

<div id="container">
    <div id="pic1" class="pic1">
        <a href="http://www.google.com"><img src="google.png"/></a>
    </div>
    <div id="pic2" class="pic2">
	<img src="211211.png"/>
    </div>
</div>

Det er typ et watermark som ligger oppå det andre bildet her. Sånn at jeg slipper å skrive "tilbud" eller whatever på hver eneste bilde jeg skal ha, men bare kan legge en .png-fil oppå bildet jeg vil skal ha dette merket på.
bildelink...

Men, jeg vil jo helst at folk blir redirected til linken som ligger i pic1-div'en selv om bildet som ligger i pic2 er det som er øverst og dermed blir klikket på med musen. Så, jeg trenger en måte å "slå av" den øverste div'en og holde den under fungerende.

Det finnes noe flott som heter pointer-events:none; dessverre funker ikke dette for IE. Så, jeg må sikkert scripte en løsning. Men, ehhh... hvor begynner jeg? Må innrømme at jeg faktisk er ganske blank på hvordan jeg skal angripe dette.

All hjelp i riktig retning settes pris på.

norboost

573 226

18. juli 2013

Hvorfor ikke bare lenke vannmerket, eller hele den øverste div'en, isteden for det underliggende bildet?

Yochi

1.020 230

18. juli 2013

Om vannmerket uansett er et eget bilde, kan du vel sette det inn med CSS.

Kode

.watermark {
position: absolute;
height: 50px;
width: 50px;
background: url('link/til/bilde.png');
bottom: 5px;
right: 5px;
z-index: 10;
}

Om du vil at klikk på vannmerket skal føre til samme side, kan du bruke javascript eller putte vannmerket i en anchor-tag som peker til samme plass som bildet.

Sist endret av Yochi; 18. juli 2013 kl. 17:24.

moret

#D4AF37

Trådstarter

6.868 6.426

18. juli 2013

Sitat av norboost

Hvorfor ikke bare lenke vannmerket, eller hele den øverste div'en, isteden for det underliggende bildet?

Vis hele sitatet...

Ah. det hadde jeg tenkt å nevne. Kort fortalt så er det vanskelig. Du vet; cms, markedsavdelinger som styrer tilbudene osv, jeg gidder ikke hardkode linker osv...

Men, du kommer med en fin idè egentlig. Jeg kan jo hente ut linken som ligger i pic1 og sette click i pic2 som en redirect med den linken kanskje.
Lurt lurt.

Yochi

1.020 230

18. juli 2013

Ja, om du ikke har kontroll over html-koden er nok litt javascript tingen.

Kode

$('.img2').click(function(e){
  e.preventDefault();
  // Videresend til korrekt lenke.
});

Noe sånt kan fungere om du bruker jQuery.

moret

#D4AF37

Trådstarter

6.868 6.426

18. juli 2013

nicy

Skal sjekke det ut i morgen. nå er det middag og jazztobakk.

Dette viste seg å være drittlett. lol.
Kunne sikkert bare sovet på det og startet fresh og klart det på 3min istedet for å gjøre dette på overtid i går. Anyways,
løsning:

Kode

<script>
$(document).ready(function(){
    $('.pic2').click(function(e){ 
            e.preventDefault(); 
            window.location=$("#pic1").find("a").attr("href");
 	    return false;
	});  
});
</script>