CSS Hilfe für Popup-Text über das Bild

allCSS Hilfe für Popup-Text über das Bild

Ich habe versucht, diese online zu finden, aber nicht wissen, wo zu beginnen, wäre toll, jede rät, Ich versuche, eine interaktive Seite zu bauen „how to use“ Für unsere Website ist diese Seite im Grunde nur ein Bild der Startseite. Wenn Sie also über einen bestimmten Bereich dieses Bildes schweben, wird ein Popup-Text angezeigt, der erklärt, was das ist.

Ich habe Wege gefunden, Text für den Schwebeflug über Bild zu popup aber es ist das ganze Bild nicht bestimmter Abschnitt innerhalb, irgendwelche Ideen, oder das ist nicht möglich?

Prost

Quelle

2017-06-27 nsic

Java oder Javascript? –

Mögliches Duplikat von [mouse hover message display über bestimmte Teile des Bildes jquery/js] (https://stackoverflow.com/questions/15445591/mouse-hover-message-display-over-certain-parts-of-image-jquery -js) –

Bauen Sie das in Java? Javascript ist für diese Art von Job besser geeignet. Sie können HTML und Jquery (Javascript-Bibliothek) verwenden. Einige [Tutorials]. (Https://stackoverflow.com/questions/2687566/learning-javascript-in-one-weekend) speziell [map tag] (https://www.w3schools.com/tags/tag_map.asp) für deinen Zweck. – devilpreet

Sie benötigen SVG Imagemap zu verwenden. Nur ein Beispiel. Diese Seite sollte auch helfen. Online Image Map

body { 
 
    font-family: Avenir, Helvetica, sans-serif; 
 
} 
 

 
#lynskey circle, 
 
#lynskey polygon { 
 
    fill: none; 
 
    pointer-events: all; 
 
} 
 

 
#lynskey text { 
 
    opacity: 0; 
 
    transition: .3s; 
 
    font-size: 24px; 
 
} 
 

 
#lynskey polygon:hover, 
 
#lynskey circle:hover { 
 
    cursor: pointer; 
 
} 
 

 
#lynskey polygon:hover+text, 
 
#lynskey circle:hover+text, 
 
#lynskey circle:focus+text, 
 
#lynskey polygon:focus+text { 
 
    opacity: 1; 
 
} 
 

 
@media all and (max-width: 500px) { 
 
    #lynskey text { 
 
    font-size: 28px; 
 
    } 
 
} 
 

 
#lynskey { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    max-width: 1500px; 
 
} 
 

 
#lynskey svg { 
 
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lynskey-med.jpg'); 
 
    background-size: cover; 
 
} 
 

 
@media all and (min-width: 750px) { 
 
    #lynskey svg { 
 
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lynskey-large.jpg'); 
 
    } 
 
}

<div id="lynskey"> 
 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 586"> 
 
    <title>Lynskey 2015 Backroad Bike Technical Details</title> 
 
    <circle cx="770" cy="401" r="172" /> 
 
    <text x="320" y="570">DTSwiss TK540/X.9 wheelset</text> 
 
    <polygon points="256,29 443,29 443,60 357,101 266,65" /> 
 
    <text x="0" y="120">Selle Italia X1 Flow Saddle</text> 
 
    <polygon points="646,133 367,159 245,350 283,409 390,434 413,379 456,370 500,400 677,207 684,229 697,217 669,133" /> 
 
    <text x="415" y="250">Titanium frame</text> 
 
    <circle cx="225" cy="401" r="51" /> 
 
    <text x="320" y="570">SRAM Apex rear dérailleur</text> 
 
    </svg> 
 
</div>

Quelle

2017-06-27 05:10:31 Hash

CSS Hilfe für Popup-Text über das Bild

Antwort

Verwandte Themen