• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Grafik bei OnMouseOver durch Inputfeld ersetzen

G

Grandulin

New member
Hallo Leute,

ich konnte bei Google nichts finden und ihr seid meine letzte Hilfe.

Ich habe eine Grafik: Ich möchte diese Grafik bei Mouseover durch einen anderen Inhalt ersetzen (ggf. auch mit einem eleganten Übergang) und bei Mouseout soll wieder die Grafik erscheinen. Bei dem Inhalt vom Mouseover soll es sich um ein Suchfeld handeln.

Ich hoffe ihr könnt mir helfen!

LG
 
das event heißt onmouseover und onmouseout.
und dann entweder dem einen oder dem anderen ein display:none geben.
wichtig: wer js deaktiviert hat kann das wahrscheinlich nicht nutzen.
und nutzer von touchdevices können es auch nicht nutzen.
 
Hi,

danke dir, für die schnelle Antwort.

Das über display:none zu lösen, hatte ich mir bereits gedacht. Aber ich habe alt 0 Ahnung davon, wie ich es dann tatsächlich im Code realisieren kann :(

Könnte man Nutzern von touch-Geräten auch noch ein optionales onClick geben?
 
Naja, ich habe wirklich nicht viel Ahnung von JS. Kann nur HTML&CSS :(

Ist es evtl. möglich wenn mir jemand eine Vorlage aufschreiben könnte?

Ich habe also ein

<div id="logo"><img id="grafik" src="logo.png"></div>

Und bei onMouseOver sowie onClick soll der <img> Tag durch folgendes ersetzt werden:

<input id="searchfield" type="text" />

Bei MouseOut soll wieder das <img> erscheinen.

Wäre echt toll. Man muss sich vorstellen, ich habe zwar die einzelnen Puzzle-Teile das eventuell selbst lösen zu können, kann diese Puzzle-Teile aber nie zusammenfügen :|
 
Zuletzt bearbeitet von einem Moderator:
Ev. wäre es sogar besser, das komplett ohne JS zu machen, wenn du nur das onclick nicht unbedingt brauchst:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#searchfield, #logo:hover #grafik {
	display: none;
}
#logo:hover #searchfield, #grafik {
	display: initial;
}
</style>
</head>
<body>
<div id="logo"><img id="grafik" src="logo.png">
<input id="searchfield" type="text"></div>
</body>
</html>
 
Man könnte da auch noch mit CSS-Transitions arbeiten:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
#logo{
	position: relative;
}
#grafik {
	position: absolute;
	bottom: 0;
	left: 0;
}
#searchfield, #grafik {
	transition: 1s opacity;
}
#searchfield, #logo:hover #grafik {
	opacity: 0;
}
#logo:hover #searchfield, #grafik {
	opacity: 1;
	z-index: 10;
}
</style>
</head>
<body>
<div id="logo"><img id="grafik" src="logo.png">
<input id="searchfield" type="text"></div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben