Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<p onMouseOver="showTooltip('info1', false)" onMouseOut="hideTooltip('info1', false)" onclick="showTooltip('info1', true)"> Po najetí myší SEM se objeví DIV, který po odjetí myší zase zmizí. Když tu kliknu, objeví se zde ten samý DIV (s jiným ID) natrvalo, tedy dokud na něj nekliknu. </p> <div id="info1" class="infobox tooltipHidden" onclick="hideTooltip('info1', true)"> druhé okno, okno, okýnko <table> <tr><td>Položka</td><td>hodnota</td></tr> <tr><td>Položka</td><td><img src="gifslunce.gif" width="60px" ></td></tr> </table> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.infobox { position: absolute; top: 30px; left: 70px; background-color: #BBBBBB; padding: 6px 8px 6px 8px; border: 1px solid black; } .tooltipHidden { display: none; } .tooltipShow, .tooltipPersist { display: block; }
CSS
Autoformát
CSS reset
Až na konci
function hasClass( elem, name ) { return ( " " + elem.className + " " ).indexOf( " " + name + " " ) >= 0; } function addClass( elem, name ) { if ( !hasClass( elem, name ) ) { elem.className += ( elem.className ? " " : "" ) + name; } } function removeClass( elem, name ) { if (elem) { var oldCls = " " + elem.className + " "; // ten poslední replace má odstranit nadbytečné mezery elem.className = oldCls.replace( " " + name + " ", " " ).replace(/ /g, " "); } } function showTooltip(id, persist) { var elm = document.getElementById(id); removeClass(elm, "tooltipHidden"); addClass(elm, (persist ? "tooltipPersist" : "tooltipShow")); } function hideTooltip(id, hidePersistent) { var elm = document.getElementById(id); if (hidePersistent) { removeClass(elm, "tooltipShow"); removeClass(elm, "tooltipPersist"); addClass(elm, "tooltipHidden"); } else { if (!hasClass(elm, "tooltipPersist")) { removeClass(elm, "tooltipShow"); addClass(elm, "tooltipHidden"); } } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>