Ciao, sono riuscito a combinare qualcosa, per i browser non sono ancora riuscito a far funzionare il codice su tutti, sono riuscito a personalizzare con il focus l'immagine dove si clicca per indovinare la risposta e mi porta sulla pagina php dandomi la risposta corretta o sbagliata a secondo su che immagine si va a cliccare, pulendo anche il codice.
Oltre ai browser ho qualche altro quesito da risolvere:
Ho il testo che metto nell'attributo alt, che si visualizza nell'immagine, oppure se non c'è alt, il testo che c'è dentro value""
Nei css, per dare l'effetto di focus alla seconda immagine o o copiato il codice della prima cambiando dei parametri, secondo voi c'è il modo per usare meno codice?
Avete qualche consiglio da darmi.
Vi inserisco il codice.
codice HTML:
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="" />
<title>Quiz Di Inglese</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="Style.css" />
<div id="orizzontale">
<form action="Quiz2.php" method="post">
<ul>
<li>
<a title="MAN">
<input type="image" width="195" height="200" name="risposta" value="Man" class="Bottone" alt="Sorry image not loaded.">
</a>
</li>
</ul>
<ul class='a';>
<li>
<a title1="WOMAN">
<input type="image" width="195" height="200" name="risposta" value="Womaan" class="Bottone" alt="Sorry image not loaded.">
</a>
</li>
</ul>
</form>
</div>
<div class="TraduciUomo" id="one"><h1>---------Testo-------Testo----------</h1></div>
</body> </html>
codice:
[css]
ul > li {
background-image: url('Man.jpg');
/*background:;*/
position: absolute;
top: 30%;
left: 30%;
width: 10%;
list-style: none;
font-size: 25px;
color: blue;
}
ul a { text-decoration: none; display: block; }
ul li input { display: block; position: relative; z-index: -1; }
ul li:not([class=na]) input { position: static; }
ul a:hover, ul a:focus { display: block; outline: none; box-shadow: 3px 3px 5px blue; }
ul a:hover input, ul a:focus input { outline: 3px solid #ccc; }
ul a:hover:after,
ul a:focus:after
{
content: attr(title);
position: absolute;
bottom: 0;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
width: 100%;
background: rgb(255,255,255);
background: rgba(255,255,255,0.7);
}
ul.a > li {
background-image: url('Woman.jpg');
/*background:;*/
position: absolute;
top: 30%;
left: 41%;
width: 10%;
list-style: none;
font-size: 25px;
color: blue;
}
ul.a a { text-decoration: none; display: block; }
ul.a li input { display: block; position: relative; z-index: -1; }
ul.a li:not([class=na]) input { position: static; }
ul.a a:hover, ul a:focus { display: block; outline: none; box-shadow: 3px 3px 5px blue; }
ul.a a:hover input, ul a:focus input { outline: 3px solid #ccc; }
ul.a a:hover:after,
ul.a a:focus:after
{
content: attr(title1);
position: absolute;
bottom: 0;
height: 30px;
line-height: 30px;
text-align: center;
font-weight: bold;
width: 100%;
background: rgb(255,255,255);
background: rgba(255,255,255,0.7);
}
.TraduciUomo{
width: 680px;
height: 50px;
}
#one {
position: fixed;
top: 82%;
left: 52%;
margin-top: -300px;
margin-left: -415px;
color: #008800; }
Permessi di invio
Rispondi quotando