• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Formular (Bild bei Hover anzeigen)

K

K4nndoo

Neues Mitglied
Hi Leute,
ich will in einem Formular ein Bild anzeigen lassen wenn mann über den Namen geht.
Ich möchte aber nur CSS und Html nutzen.
Hab schon alles versuch könnt Ihr mir vil. helfen?

HTML: 
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8.5" />
        <title>Formular</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" >
    </head>
    <body>
        <div id="formular">
            <form action="index.php" method="post">
                <div class="inputfield">
                    <div class="left">
                        <label>
                            <b>Hersteller:</b>
                        </label>     
                        <br />
                        <br />
                            <input type="radio" label="Marke1" class="marke1">Marke 1</input>
                            <br />
                             <input type="radio" label="Marke2" class="marke2">Marke 2</input>
                    </div>
                    <div class="right">
                        <img class="marke1" src="marke1.png" />
                        <img class="marke2" src="marke2.png" />
                    </div>
                </div>
            </form>
        </div>
    </body>
</html>
Code: 
body{
    background-color:#ffffff;
    color:#000000;
}
.inputfield{
    border:1px solid #000000;
    border-radius:10px;
    background-color:#dfdfdf;
    width:900px;
    min-height:150px;
}
.left{
    max-width:450px;
    min-width:150px;
    float:left;
    padding-left:20px;
    padding-top:15px;
}
.right{
    min-width:300px;
    max-width:450px;
    min-height:150px;
    float:left;
}
img.marke1{
    width:300px;
    height:150px;
    visibility:hidden;
    background-repeat:no-repeat;
}
img.marke2{
    width:300px;
    height:150px;
    visibility:hidden;
    background-repeat:no-repeat;
}
input{
    max-width:450px;
    min-width:40px;
    min-height:20px;
    max-height:30px;
    
}

/* Bilder */

input.marke1:hover .marke1{
    visibility:visible;
}
input.marke2:hover .marke2{
    visibility:visible;
}
 
Werbung:
Wie wäre es mit einem background-image?

HTML: 
input.marke1:hover { background-image: url(../images/bg.gif); }
 
Werbung:
Dein Markup ist falsch, mit diesem Selektor input.marke1:hover .marke1 wuerdest Du ein Element mit der Klasse marke1 unterhalb eines input Elements mit der Klasse marke1 anzeigen, wenn dieses mit der Maus ueberfahren wird.

Mit diesem Codebeispiel solltest Du weiter kommen. Das input Element is ueberigens wie das img Element ein selbstschliessendes.

HTML: 
<div class="marke">
    <input type="radio" label="Marke1" class="marke1" />
    <img class="logo" src="marke1.png" />
</div>
Code: 
.logo {
    visibility:hidden;
}
.marke:hover .logo {
    visibility:visible;
}
 
Danke für die schnellen Antworten.

Ich habs jetzt so gelöst:

HTML: 
						<div class="marke1">
							<input type="radio" label="Marke1">Marke 1</input>
							<img class="marke1" src="file://localhost/C:/Dokumente%20und%20Einstellungen/Azubi/Desktop/bilder/marke1.png" />
						</div>
						<div class="marke2">
							<input type="radio"label="Marke2" >Marke 2</input>
							<img class="marke2" src="file://localhost/C:/Dokumente%20und%20Einstellungen/Azubi/Desktop/bilder/marke2.png" />
						</div>

Code: 
img.marke1{
	width:300px;
	height:150px;
	float:right;
	position:absolute;
	z-index:5;
	visibility:hidden;
	background-repeat:no-repeat;
}
img.marke2{
	width:300px;
	height:150px;
	visibility:hidden;
	float:right;
	position:absolute;
	z-index:5;
	background-repeat:no-repeat;
}
input{
	max-width:450px;
	min-width:40px;
	min-height:20px;
	max-height:30px;
	
}

/* Bilder */

.marke1:hover .marke1{
	visibility:visible;
}
.marke2:hover .marke2{
	visibility:visible;
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben