2017-12-31 114 views
-1

Wer weiß, wie ich den Text auf ein Bild positionieren kann, wenn seine geklickt wurde,Text Position auf das Bild klicken

Ich habe ein Bild angehängt unten, wie ich möchte es angezeigt,

enter image description here

function showSpoiler(obj) { 
 
    var inner = obj.parentNode.getElementsByTagName("div")[0]; 
 
    if (inner.style.display == "none") 
 
    inner.style.display = ""; 
 
    else 
 
    inner.style.display = "none"; 
 
}
body, 
 
input { 
 
    font-family: "Trebuchet ms", arial; 
 
    font-size: 0.9em; 
 
    color: #333; 
 
    position: absolute; 
 
    top: 1em; 
 
} 
 

 
.spoiler {} 
 

 
.spoiler .inner {}
<div class="spoiler"> 
 
    <img onclick="showSpoiler(this);" src="http://konpakuto.com/logo.jpg /> 
 
    <div class="inner" style="display:none;"> 
 
    This is a spoiler! 
 
    </div> 
 
</div>

+0

was Sie versucht haben, und welche Rolle funktioniert nicht wie erwartet? –

+0

Ich habe versucht, den Text über das Bild zu bewegen, so dass, wenn es angeklickt hat Display entweder sperren/entsperren. – harry

Antwort

1
  • Sie können die .inner Klasse div über Ihr Bild für Anfänger setzen.
  • Nutzen Sie die absolute Positionierung für die Klasse .inner, sodass das Bild nicht nach unten verschoben wird, wenn .inner angezeigt wird, und es an der Mitte ausrichten.
  • Verschieben Sie die Bild mit einigen m Argin von oben, um etwas Platz für den Text zu machen.
  • Zum Umschalten zwischen Entsperren und Sperren können Sie eine Flag-/Zählvariable verwenden, die den Wert bei jedem Klick ändert.

.

.spoiler { 
    background: black; 
    width: 100%; 
    position:relative; 
} 

.spoiler img { 
    margin-top: 60px; 
    background: black; 
    width: 100%; 
} 

.spoiler .inner { 
font-size:20pt; 
position:absolute; 
color:white; 
top:5px; 
width:100%; 
text-align:center; 
} 

var count=0; 
 
function showSpoiler(obj) { 
 
    var inner = obj.parentNode.getElementsByTagName("div")[0]; 
 
    if (count==0){ 
 
    inner.textContent = "UNLOCK"; 
 
    setTimeout(function(){inner.textContent = "";},2000); 
 
    count=1; 
 
    } 
 
    else{ 
 
    inner.textContent = "LOCK"; 
 
    setTimeout(function(){inner.textContent = "";},2000); 
 
    count=0; 
 
    } 
 
    
 
}
body, 
 
input { 
 
    font-family: "Trebuchet ms", arial; 
 
    font-size: 0.9em; 
 
    color: #333; 
 
    position: absolute; 
 
    top: 1em; 
 
} 
 

 
.spoiler { 
 
    background: black; 
 
    width: 100%; 
 
    position:relative; 
 
} 
 

 
.spoiler img { 
 
    margin-top: 60px; 
 
    background: black; 
 
    width: 100%; 
 
} 
 

 
.spoiler .inner { 
 
font-size:20pt; 
 
position:absolute; 
 
color:white; 
 
top:5px; 
 
width:100%; 
 
text-align:center; 
 
}
<div class="spoiler"> 
 
    <div class="inner"> 
 
    LOCK 
 
    </div> 
 
    <img onclick="showSpoiler(this);" src="http://konpakuto.com/logo.jpg" /> 
 
</div>

+0

Das ist genau das! Jetzt muss ich nur noch einen Toggle-Button hinzufügen, damit er zwischen Lock und Unlock wechselt! Kennen Sie den besten Weg, dies zu erreichen? – harry

+0

@harry Kein Problem :) Vergessen Sie nicht, es zu bewerten und als akzeptiert zu markieren. Prost. Und wenn Sie möchten, dass der Inhalt zunächst gesperrt und dann entsperrt wird, anstatt display: none und all zu verwenden, ändern Sie einfach den inneren Schein von .inner mit Javascript. –

+0

nur eine letzte Sache, was ist der beste Weg, um den Schalter beim Klick zu erreichen? – harry

Verwandte Themen