HTML Popup automatisch/ wenn der Mauszeiger drüber ist öffnen?

Hallo, ich habe ein popup erstellt welches sich öffnet, wenn man auf den dafür vorgesehenen link clickt. Nun möchte ich wissen wie ich es schaffe, dass es sich öffnet wenn meine maus über dem link ist und sich schließt wenn der Mauszeiger nichtmehr über dem link ist. Des weiteren würde ich gern wissen, wie ich es schaffe, dass sich das popup bei einer bestimmten Aktion ( wie das öffnen der Seite) automatisch öffnet.

Hier geht's zum Popup

Wenn man die oben stehenden Dinge mit CSS bewirken kann, dann hilf mir das genau so wie HTML.

Schon mal danke fürs antworten - Dorian

2 Antworten

AnonYmus19941

18.03.2016, 15:34

<p onmouseover="document.location='link.html';">Text</p>

AnonYmus19941

18.03.2016, 15:37

Das ruft einen Link auf (link.html), wenn man mit der Maus über den
Text fährt. Andere Möglichkeiten sind "onmousemove" und "onclick".

Dorian21

Beitragsersteller

18.03.2016, 15:41

@AnonYmus19941

Ok es funktioniert sehr gut, aber wie schaffe ich es, dass dieser Link sich als popup oder in einem neuen Fenster öffnet?

AnonYmus19941

18.03.2016, 15:42

@AnonYmus19941

Und, falls es dich interessiert: hier (https://www.sempervideo.de/clickjacking/index2.html) kannst du es ausprobieren (eigentlich ist die Seite dazu da, um sog. Clickjacking zu demonstrieren. Das entsprechende Video von Sempervideo wurde leider auf privat gestellt...
Kurze Erklärung: wenn man mit der Maus auf den Link klickt, dann wird per JS ein Layer unter den Mauszeiger geschoben und dann durch den Klick der Link aufgerufen. So wird unten eine andere URL angezeigt, als tatsächlich aufgerufen wird (bei der Verteilung von Schadware beliebt)).

AnonYmus19941

18.03.2016, 15:44

@Dorian21

Ersetz einfach link.html mit dem Link für das Popup.
Schließen wird dann etwas komplizierter...
Vermutlich ist die Lösung von GanMar besser geeignet.

Dorian21

Beitragsersteller

18.03.2016, 15:51

@AnonYmus19941

Ok, sehr interessant. Wo finde ich denn, wie ich das in mein Programm einbaue?:)

AnonYmus19941

18.03.2016, 16:02

@Dorian21

Am einfachsten geht es, wenn du dir den Quellcode der sechs Seiten anschaust. Es gab mal ein gutes Erklärungsvideo dazu, aber das ist, wie schon gesagt, jetzt auf privat gestellt (https://www.youtube.com/watch?v=jsgwDdVbh4U). Wenn es dich sehr interessiert, dann kannst du dem Team ja eine Mail (mailto:info@sempervideo.de) schreiben und sie bitten, es nochmal freizuschalten...

weed9r

18.03.2016, 15:46

Sollte nicht jeder Popupblocker das blocken...?

AnonYmus19941

18.03.2016, 15:48

@weed9r

Darum geht es doch nicht. Er wollte doch ein Popup, ich gehe davon aus, dass es es nur für sich privat oder zum Testen oder so braucht...

Dorian21

Beitragsersteller

18.03.2016, 15:53

@AnonYmus19941

Es ist für ein schulprojekt aber das haben wir erst in ein paar Wochen, da html mich aber generell interessiert habe ich mit dem erstellen meiner website bereits begonnen. Das clickjacking könnte lustig werden für das Programm was ich in der schule abgeben werde.

Dorian21

Beitragsersteller

18.03.2016, 15:35

ok vielen vielen dank , probiere es sofort mal aus!

weed9r

18.03.2016, 15:49

Hey, was du suchst ist kein Popup sondern ein Tooltip.

Den Solltest du mit Css gestallten und mit Javascript aktivieren. Wenn du möchtest schreibe ich dir später so ein ding.

Musst nur sagen ob du jquery eingebunden hast.

weed9r

18.03.2016, 17:44

Na pass auf.

Ich strukturiere dir das ganze mal ein wenig mal und schreib dir anhand deiner Seite ein kleines Tutorial wie und warum man sowas macht :)

Morgen hab ich dafür zeit

weed9r

18.03.2016, 16:13

Wenn es für dich ok ist, würde ich gern mit Jquery einbinden. Es lässt sich da einfach besser mit selektoren arbeiten.

Ich denke ich kann das morgen Vormittag machen.

Wird nen einfaches kleines snippet mit Data-attributes.

Wie weit sind deine Kenntnisse in html/css/javascript?

Dorian21

Beitragsersteller

18.03.2016, 17:11

@weed9r

Ich sage mal ich habe wenig bis keine Kenntnisse… ich hatte einen crash kurz auf youtube angesehen und anhand dessen meine website gestaltet… um alles perfekt zu verstehen und anwenden zu können müsste ich das ganz mehr anwenden. Die Website besteht derzeit aus einer CSS und 2 HTML Dateien einem video und einem Bild.

Dorian21

Beitragsersteller

18.03.2016, 15:58

Gerne. Ich habe von all dem jetzt nicht so ne super Ahnung :D, jquery habe ich nicht eingebunden … die Seite ist sehr simpel, denn ich habe erst vorgestern damit begonnen das zu lernen und gestern nur 20 Minuten an der Seite gearbeitet, aber ich denke mal dafür lässt sie sich sehen.

Ähnliche Beiträge

Auswahlmenu mit link HTML?

Hallo ich will dass wenn ich den link im Auswahlmenü öffne dass sich dieses Dokument öffnet aber er zeigt dann nichts an aber öffnet sich woran könnte es liegen?

</select>

...zum Beitrag

Wie ändere ich das Design (html) des mittleren Mauszeigers (mittlere Maustaste drücken um zu scrollen),den sogenannten scroll cursor für alle Webseitenbesucher?

den normalen Mauszeiger (pointer)/ Pfeil schaffe ich selbst zu verändern in html, aber nicht den Mauszeiger; wenn ich die mittlere Maustaste drücken zum scrollen

dieses Standarddesign für alle Webseitenbesucher in ein individuelles Design ändern:

...zum Beitrag

html code popup fenster?

Hallo GuteFrage-Community,

kann mir jemand helfen? Früher hatte ich einen bestimmten Code auf meinen Webseiten, der dazu führte, dass beim Verlassen der Seite automatisch eine andere Seite geöffnet wurde. Ich glaube, es war ein Pop-up.

...zum Beitrag

Wie erstelle ich einen HTML Code für PopUp Fenster?

Würde gerne eine Beliebige Seite z.B. die Google Startseite auf der eigenen Homepage einbetten und als PopUp Fenster öffnen wollen... auf homepage-buttons habe ich folgenden möglichen Ansatz gefunden, dieser schaut wieefolgt aus:

    <a target="popup" onclick="window.open
  ('', 'popup', 'width=580,height=360,scrollbars=no, toolbar=no,status=no,
  resizable=yes,menubar=no,location=no,directories=no,top=10,left=10')
  "href="popupdatei.html">Hier geht's zum Popup</a>

wie aber schaffe ich es nun eine Beliebige Webseite zu integrieren? Ich dachte an so etwas:

<a target="popup" onclick="window.open
  ('', 'popup', 'width=580,height=360,scrollbars=no, toolbar=no,status=no,
  resizable=yes,menubar=no,location=no,directories=no,top=10,left=10')
  "href="<a href="https://google.com">Hier geht's zum Popup</a>

liege ich da etwa falsch?

...zum Beitrag

"Popup" in HTML?

Guten Abend,

ich will was in meine Seite einbauen. Dies soll wie eine Art von "Cookie" beim aufrufen der Seite, sich öffnen und soll dann nach einem Knopfdruck oder ähnliches wieder verschwinden. Wie kann ich das hinbekommen?

...zum Beitrag

Kann man mit HTML/CSS einen E-Mail Link so machen das er automatisch im Browser geöffnet wird?

...zum Beitrag

Mit HTML CSS und JS Dateien auf dem Computer öffnen?

Ich möchte mit HTML CSS und JS eine Store App programmieren, die dann Installationsdateien für Apps automatisch herunterlädt und ausführt. So weit bin ich auch fast gekommen aber jetzt bleibt mir die Frage übrig: Kann ich mit HTML CSS und JS programmieren das das Setup automatisch geöffnet wird? Gibt es einen Weg Dateien auf dem Computer zu öffnen?

...zum Beitrag

PHP Variable mit Button über javascript an Popup übergeben?

Hallo,
ich habe eine mit PHP dynamisch erstellte Tabelle zum anzeigen von Anträgen. In jeder Zeile meiner Tabelle gibt es einen Button zum öffnen eines Popups. An dieses Popup soll die ID des jeweiligen Antrags übergeben werden um alle Daten auszulesen.

Wie kann ich es schaffen, dass in einer dynamischen Tabelle (alle Button Namen gleich) jeder Button unterschieden wird, oder erkannt wird welchen Button ich gedrückt habe? Und wie kann ich die Variable aus PHP über javascript an das Popup übergeben?

Ich würde mich über jede Hilfe freuen, versuche es nun schon seit Tagen, komme aber zu keinem Ergebnis

...zum Beitrag

DropDown-Menu Links für Handy?

wenn ich mein dropdown-menu habe, und ich will dass wenn sich dieses dropdown-menu öffnet und die kategorien zum auswählen bereitstellt, dass wenn ich auf die Kategorie klicke dann sich ein link öffnet, dies funktioniert mit meinem html code (auf der website version) perfekt, jedoch funktioniert dies nicht in der smartphone ansicht, warum das ?

Falls es hilft hier dier html-code

<!DOCTYPE html>

<head>

<title>Language Selection</title>

<style>

/* Dropdown Button */

.dropbtn {

font-size: 16px;

border: none;

}

/* The container <div> - needed to position the dropdown content */

.dropdown {

position: relative;

display: inline-block;

}

/* Dropdown Content */

.dropdown-content {

display: none;

position: absolute;

background-color: transparent;

min-width: 100px;

box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);

z-index: 1;

top: 100%;

left: 50%;

transform: translateX(-50%);

margin: 8px 0;

}

/* Links inside the dropdown */

.dropdown-content a {

color: transparent;

padding: 15px 13px;

text-decoration: none;

}

/* Change color of dropdown links on hover */

.dropdown-content a:hover {

background-color: transparent; /* Ändere die Hintergrundfarbe beim Hover */

}

/* Show the dropdown menu when hovering over the dropdown */

.dropdown:hover .dropdown-content {

display: block;

}

/* Keep the dropdown menu open when hovering over it */

.dropdown:hover .dropbtn {

background-color: transparent;

}

</style>

</head>

<body>

<div id="gtco-logo"><a href="index.html">Endo<em>scopy</em></a></div>

</div>

<ul>

<li><a href="#" data-nav-section="practice-areas">Anwendungsbereiche</a></li>

<li><a href="#" data-nav-section="technics">Operationstechniken</a></li>

<li><a href="#" data-nav-section="our-team">Unser Team</a></li>

<li class="btn-cta"><a href="#" data-nav-section="contact"><span>Kontakt</span></a></li>

<a href="#" class="dropbtn">Deutsch ∨</a>

<p><a href="italiano.html" class="italiano">Italiano</a></p>

<p><a href="english.html" class="english">English</a></p>

</div>

</li>

</ul>

</div>

</nav>

</div>

// JavaScript to handle dropdown menu clicks

document.addEventListener("DOMContentLoaded", function() {

var dropdownButtons = document.querySelectorAll(".dropdown .dropbtn");

var dropdownContents = document.querySelectorAll(".dropdown .dropdown-content");

// Function to toggle the dropdown content visibility

function toggleDropdown(index) {

if (dropdownContents[index].classList.contains("show")) {

dropdownContents[index].classList.remove("show");

} else {

dropdownContents[index].classList.add("show");

}

// Close dropdown content if clicked outside the dropdown

window.addEventListener("click", function(event) {

if (!event.target.matches('.dropbtn')) {

dropdownContents.forEach(function(content) {

content.classList.remove("show");

});

}

});

// Handle dropdown button clicks

dropdownButtons.forEach(function(button, index) {

button.addEventListener("click", function(event) {

event.stopPropagation(); // Prevent the document click event

toggleDropdown(index);

});

// Handle dropdown options clicks

var dropdownOptions = document.querySelectorAll(".dropdown-content a");

dropdownOptions.forEach(function(option) {

option.addEventListener("click", function(event) {

// Prevent default action

event.preventDefault();

// Redirect to the selected page

window.location.href = option.getAttribute("href");

});

</script>

</body>

</html>

...zum Beitrag

Link direkt öffnen mit HTML?

Ich wollte Fragen ob es eine möglichkeit gibt mit HTML Links direkt zu öffnen, z.B. ich verbinde mich auf die seite "www..direktlink.de" und es öffnen sich direkt YouTube und Google in 2 anderen Tabs

...zum Beitrag

Html Seitengröße anpassen?

Ich habe eine Website auf meinem Ipad (9,7 Zoll) programmiert und für das Querformat optimiert. Nun möchte ich, dass sich die Größen (Text) automatisch anpassen, wenn man die Website mit einem Gerät (beliebige Bildschirmgröße) öffnet. Vielen Dank im Voraus.

...zum Beitrag

Durch HTML den Browser zoom änden

Kann man durch HTML einstellen, dass wenn jemand die Seite öffnet der Browser Zoom automatisch auf 100% gestellt wird?

...zum Beitrag

Website vergrößern Html/ Css?

Hallo alle zusammen,

Ich habe eine Website am Laptop mit HTML und CSS programmiert, aber wenn ich das auf dem PC öffnen möchte dann ist das Format kleiner und damit es passt muss ich die Website um 175% vergrößern im browser...

Kann ich das in HTML und CSS irgendwie reinschreiben, dass sich die seite immer automatisch in der größe ist und wenn ja wie?

Danke für eure hilfe

...zum Beitrag

Wie kann ich eine Navigationsleiste in HTML an die rechte Seite verschieben?

Ich habe in HTML eine Navigationsleiste. Diese befindet sich ja standartmäßig an der linken Seite der Website. Wie schaff ich es dann die ganze Leiste (

tag) an die rechte Seite der Website ist?

Egal ob mit CSS oder HTML.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen