fejléc
Gyakori kérdések Belépés Új kérdés Véletlen kérdés
Keresés
Kezdőoldal » Számítástechnika » Weblapkészítés » Hogy kell felugró ablakot...

Hogy kell felugró ablakot készíteni HTML-ben?

Figyelt kérdés
Azt szeretném megcsinálni, hogy pl van egy kép, amin az <area> TAG-el ki van jelölve egy kis terület, és ha arra a kis területre rávinném az egeret, akkor egy szövegdoboz szerű ablak ugrana fel, ami tartalmaz pár infót és mondjuk egy gif-et. Aztán el is tűnik, ha elhúzom az egeret a területről.

#weblap #tag #HTML #area
2017. okt. 4. 18:02
 1/5 anonim ***** válasza:
ha jól tudom akkor nekünk azt mondták, hogy image map-pel kell készíteni, mi ehhez GIMP-et használtunk, hogy a képen megadjuk az image mapokat. :D
2017. okt. 4. 18:22
Hasznos számodra ez a válasz?
 2/5 A kérdező kommentje:
Köszi a választ! Minden meg van oldva, nem map pontok kijelölésével vannak problémák, hanem konkrétan a felugró ablakkal. :D Ötletem sincs, hogy mivel kellene olyat csinálni, hogy ha valami fölé viszed a kurzort, akkor megjelenjen egy ablak. :D Ebben kellene a segítség most. :D
2017. okt. 4. 19:38
 3/5 anonim ***** válasza:

alert()

Window.open

Vagy csak egy sima divet jelenítesz meg/rejtesz el

2017. okt. 4. 19:58
Hasznos számodra ez a válasz?
 4/5 A kérdező kommentje:
<div>-el sikerült, köszönöm!!!
2017. okt. 4. 21:55
 5/5 sharkxxx ***** válasza:

<!DOCTYPE html>

<html>

<head>

<style>

.center {

    text-align: center;

}

#tooltipbox {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}

#tooltipbox .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

   

    /* The tooltip is positioned by it's bottom center. */

    position: absolute;

    z-index: 1;

    bottom: 100%;

    left: 50%;

    margin-left: -60px;

}

</style>

<script type="text/javascript">

function domouseover(e) {

    var tooltipId = e.getAttribute("data-tooltip");

    var tooltip = document.getElementById(tooltipId);

    var tooltipbox = document.getElementById("tooltipbox");

    tooltipbox.style.left = e.getAttribute("data-tooltip-left");

    tooltipbox.style.top  = e.getAttribute("data-tooltip-top");

    tooltip.style.visibility = "visible";

}

function domoseout(e) {

    var tooltipId = e.getAttribute("data-tooltip");

    var tooltip = document.getElementById(tooltipId);

    var tooltipbox = document.getElementById("tooltipbox");

    tooltip.style.visibility = "hidden";

}

</script>

</head>

<body>

<div class="center">


<p>  </p>

<p>  </p>

<p>  </p>


<div id="tooltipbox">

  <span id="tooltip1" class="tooltiptext">

    <img src="https://www.w3schools.com/images/sun.gif" width="116">

    Tooltip 1 text</span>

  <span id="tooltip2" class="tooltiptext">

    <img src="https://www.w3schools.com/TAGs/merglobe.gif" width="116">

    Tooltip 2 text</span>

  <span id="tooltip3" class="tooltiptext">

    <img src="https://www.w3schools.com/images/venglobe.gif" width="116">

    Tooltip 3 text

  </span>

</div>


<img src="https://www.w3schools.com/TAGs/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">


<map name="planetmap" class="tooltip">

  <!--

  data-tooltip      - The id of the tooltip.

  data-tooltip-left - Left position of the tooltip.

  data-tooltip-top  - Top  position of the tooltip.

  -->

  <area onmouseover="domouseover(this)" onmouseout="domoseout(this)" data-tooltip="tooltip1" data-tooltip-left="-60px" data-tooltip-top="-80px" shape="rect"  coords="0,0,82,126" alt="Sun"    href="https://www.w3schools.com/images/sun.gif">

  <area onmouseover="domouseover(this)" onmouseout="domoseout(this)" data-tooltip="tooltip2" data-tooltip-left="+50px" data-tooltip-top="-80px" shape="circle" coords="90,58,3"    alt="Mercury" href="https://www.w3schools.com/TAGs/merglobe.gif">

  <area onmouseover="domouseover(this)" onmouseout="domoseout(this)" data-tooltip="tooltip3" data-tooltip-left="+90px" data-tooltip-top="-80px" shape="circle" coords="124,58,8"  alt="Venus"  href="https://www.w3schools.com/images/venglobe.gif">

</map>


</div>

</body>

</html>

2017. okt. 4. 22:57
Hasznos számodra ez a válasz?

Kapcsolódó kérdések:

Számítástechnika főkategória kérdései »
Számítástechnika - Weblapkészítés kategória kérdései »



Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!