Hover-Effekt erstellen in html, css und js?

Hallo,

ich würde gerne einen Hover-Effekt erzeugen, wenn man sich mit dem Cursor über einem gewissen Bereich befindet (<Area>). Nun ist es so, dass sich die Bereiche in einem Bild (Bild ist unten) befinden, welches ich mit <map> und <area> in verschiedene Bereiche unterteilt habe (für jeden Agenten ein Bereich).

Ich habe es bis jetzt nur geschafft, dass das ganze Bild einen Hover-Effekt hatte, wenn man mit dem Cursor irgendeinen beliebigen Bereich überquert hat...

Danke schonmal im Voraus!

Bild zum Beitrag

1 Antwort

Kelec

17.12.2023, 11:23

Um das für Einzelbereiche zu erziehlen wäre es einfacher wenn du den Bereich einfach in viele kleine Bilder zerschneidest.

So musst du eben eine Overlayeffekt auf den ausgewählten Bereich machen. Also entweder mit Css bei Hover die Fläche über dem Bild transparent einfärben oder so etwas in der Art oder mit JS das Bild dynamisch verändern.

Falls du das ganze öffentlich machen willst kann ich dir nur raten lass es. Viele Firmen sind nicht gerade zimperlich ihr Copyright durchzusetzen.

User1234596

Fragesteller

17.12.2023, 11:29

Ok, dass probiere ich mal... Will es nicht veröffentlichen, ist ein Schulprojekt!

Hallo, Ich bin grade dabei ein Portfolio zu Programmieren und habe Probleme damit Hover Effekte zu erstellen. Meine Frage ist wie kann man bei HTML einen Hover Effekt für Bilder erstellen so dass wenn man über das Bild hovert das der Text zum Vorscheinen kommt.?

So wie auf dieser Seite: http://themes.pixelwars.org/responsy-wp/portfolio/#prettyPhoto

Vielen dank schon mal im voraus. LG. Lacadio

...zur Frage

CSS hover Effekte sollen nach aktivien bleiben?

Ich habe z.B. einen div-Container und mache einen hover-Effekt, dass er breiter wird. Jetzt will ich, dass dies so bleibt, bis man die Seite halt neu lädt. Geht das nur mir CSS oder braucht man JS? Danke im Voraus :)

...zur Frage

Kann ich Job in Webdevelopment irgendwo finden, wenn ich solche Kurse absolviere?

https://www.udemy.com/course/der-komplette-webentwickler-2/?couponCode=LETSLEARNNOWPP

...zur Frage

Geht dieser Prompt von PromptBase auch für GPT-4?

Da bei dem Model 3.5 steht

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Guten Tag, ich suche einen HTML Code wo, verwendet werden kann zum Copyright wo sich das Jahr jedes Jahr logischerweise automatisch +1 ändert, wo finde ich so ein Code?

...zur Frage

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zur Frage

Wie kann man mit CSS etwas "ausblenden"?

Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.

Wenn man mit der Maus in diesem Bereich ist:

öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).

Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.

Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.

Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).

Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).

...zur Frage

Hintergrundfarbe ändern eines Elements(.createElement) in Javascript?

inputDecrease = document.createElement('input');
inputDecrease.type = 'button';

dachte jetzt

inputDecrease.style.background = "red";

geht aber nicht :(

weiß jemand wie das geht?

...zur Frage

Website erstellen (Shop)?

Hallo, ich würde gerne eine einfache kleine Website erstellen. Ich mache einen Fortnite Account Shop.
Die Website sollte sich diesem Shop ähneln: https://www.slurpyog.de/

Die Frage ist, wie erstelle ich diese, ohne dass mir jemand vorschreibt welche Zahlungsmethoden verfügbar sind. Ich hätte gerne diese normal Features (kostenlos) wie Warenkorb etc., aber ab der Zahlung würde ich alles gerne selbst erstellen

...zur Frage

JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

--------------------------------------------------------------------------------------------------------------

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

--------------------------------------------------------------------------------------------------------------

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

...zur Frage

React Components mit .jsx oder .js endung?

Ich sehe bei manchen die Endung für JSX anstatt .'js'

aber ändert das überhaupt was ? Oder ist das nur Schönheit.

2. Frage)

Kann ich irgendwie konfigurieren was genau mit

npx create-react-app

alles erstellt werden soll ?

Denn App.js App.css und App.test.js Stören mich und sie zu löschen ist auch aufwendig. Lieber eine Leere Seite von anfang an statt dem drehenden React Logo.

ich hätte gerne schon unterordner unter 'src' wie zb img, audio, style,components,video usw.

...zur Frage

HTML/JS Icon Link lädt zu lange?

Hey,

ich lade meine Icons über diesen Link:

<script src="https://kit.fontawesome.com/03a9efeaa3.js" crossorigin="anonymous"></script>

Dieser Link ist im head. Mein anderer script-Tag ist im body und lautet so:

<script type="module" src="./JS/main.js"></script>

Nun habe ich das Problem, dass wenn ich meine Seite neu lade, es lange lädt und dann abstürzt.

Die Konsolenausgabe sieht so aus:

Was kann ich tun?

...zur Frage

Wie programmiert ihr Apps?

Hallo. Mal ne Frage an alle Entwickler hier. Ich persönlich mache meine Apps immer mit WebView. Mit HTML, CSS und JavaScript lassen sich echt schöne Apps programmieren. Dinge wie tkinter oder bei .Net der Editor wahren mir alle schon immer zu .... Wenig. Deswegen bin ich Mal neugierig, wie programmiert ihr eine App? Editor? WebView? Qt5/Tkinter (Pur, ohne Editor dann oder mit?).

Danke im Vorraus und lg.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen