 Mouseover bei 2 Enter nebeneinander |
Sultan
Mitglied
Dabei seit: 19.07.2005
Beiträge: 2.993
Herkunft: BS
 |
|
| Mouseover bei 2 Enter nebeneinander |
     |
Hallo ihr lieben,
ich muss für die Uni eine Seite mit HTML und CSS gestalten und verzweifele gerade an den Enters. Im Prinzip kein Problem, auch das Mouseover (grau wird zu farbig, wenn die Maus druff geht) funktioniert mit folgendem Code, den ich hier aus einem Thread kopiert habe, sehr gut und schön:
| code: |
1:
2:
|
<a onmouseover="image1.src='blauenter1.jpg'; return true;" onmouseout="image1.src='blauenter.jpg'; return true;" href="htmlhome.html" return false;">
<img border=0 SRC="blauenter.jpg" name=image1></img></a> |
|
Ein Problem stellt sich allerdings ein, wenn ich ein zweites Enter daneben lege.
Dies möchte ich machen, da ich zwei Versionen der Website habe; einmal nur mit HTML gestaltet und einmal mit HTML und CSS (jaaa, ein Anfänger, aber jeder fängt mal an, wa? 
)
Frage ist: Könnt ihr mir helfen oder sagen, warum der Mouseover-Effekt mit diesem Code nicht funktioniert, wenn zwei Enter nebeneinander liegen?
Und - viel wichtiger - wie ich es doch noch hinkriege?
Mit CSS hatte ich es auch versucht, da gabs hier auch einen Code in einem Thread, aber das hat gar nix bewirkt.. Da bin ich mit dem Code oben um einiges weiter gekommen.
Vielen Dank schon mal im Voraus!
__________________
KLM²
Falke - Danke fürs Ava <3
|
|
25.11.2010 19:13 |
|
|
kext 
»Ich bin ein HAL 9000 Supercomputer.«
Dabei seit: 28.11.2008
Beiträge: 119
Herkunft: Planet Erde
|
|
Wenn das mit zweien nebeneinander nicht geht, schätze ich, dass du image1 nicht umbenannt hast. Wie auch immer, der Code ist nicht so besonders gut. Probiers mal hiermit:
Im Stylesheet oder <style>-Bereich trägst du folgendes ein:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
|
a.enter
{
display: inline-block;
zoom: 1;
*display: inline;
}
a.enter:hover
{
border: 0;
}
a.enter img
{
border: none;
vertical-align: bottom;
}
a.enter:hover img
{
visibility: hidden;
} |
|
Deine Enterbilder machst du nun einfach so:
| code: |
1:
2:
|
<a class="enter" href="htmlhome.html" style="background-image: url('blauenter1.jpg');"><img src="blauenter.jpg" alt="HTML-Version" /></a>
<a class="enter" href="csshome.html" style="background-image: url('gruenenter1.jpg');"><img src="gruenenter.jpg" alt="CSS-Version" /></a> |
|
Die Pfade musst du natürlich anpassen.
__________________
|
|
|
25.11.2010 21:41 |
|
|
|
Impressum
|
