DIV Overlay anzeigen, wenn auf ein Bild geklickt wird?

Question

Ich versuche herauszufinden, wie ein verstecktes DIV als Overlay angezeigt wird, wenn auf ein Bild geklickt wird.

Ich habe dieses Beispiel gefunden: FIDDLE

Welche ein rotes Quadrat zeigt und wenn Sie auf, dass es die DIV zeigt. Klicken Sie erneut auf das DIV verschwindet.

Ich möchte das gleiche tun, aber den Klick an ein Bild gebunden haben und das Overlay nach links ziehen -> direkt aus dem Bild, wenn das Bild angeklickt wird.

Wer irgendwelche Ideen, wie ich das tun kann?

Danke

Answer 1

Sind Sie auf der Suche nach so etwas? Ich habe das rote Feld div durch ein img-Tag ersetzt, während die ID beibehalten wurde, sodass das Skript immer noch auf die Aktion klicken und diese ausführen kann. Also, wenn Sie auf das Bild klicken, zeigt/versteckt die Jquery das Overlay noch?

http://jsfiddle.net/wacrmfqu/1/

ersetzt ich das rote Feld div mit:

<img id="clickme" src="http://travel.usnews.com/images/destinations/94/yosemite_mirror_lake_getty_michael_h_spiva.jpg"> 

und änderte die CSS für #clickme zu:

#clickme { 
    position: absolute; 
    top: 0; 
    right: -100px; 
    height: 100px; 
    width: 100px; 
    cursor: pointer; 
}