tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
1062
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 17.05.10 11:23 #1
    vodka vodka ist offline Mitglied Gold
    Registriert seit
    May 2003
    Beiträge
    231
    Hallo,


    Habe eine Frage, und zwar:

    Ich habe ein Link mit einem underline Hover, und weiter unten ein Bild mit einem border Hover. Der dazgehörige Link ist für beide der gleiche.

    Meine frage ist wie funktioniert das, dass wen man z.B. mit der Maus über den Textlink fährt der normale underline Hover kommt aber dazu noch automatisch der Hover vom Bild auch erscheint ohne mit der Mause über das Bild zu fahren?
    Und das ganze auch umgekehrt.


    Kenn mich leider mit Javascript nicht so aus aber ich denke dies ist nur mit Javascript möglich.

    Kann mir jemand bitte helfen.

    Gruss

    Nico
     
    Zitieren Zitieren
  2. 17.05.10 13:20 #2
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    Hi,

    den hover-Effekt des Links würde ich über CSS regeln (Pseudeeigenschaft :hover).

    Um die Eigenschaften des Bildes bei mouseover bzw. mouseout zu ändern, gibst du den img-Tags am besten IDs, über die sie eindeutig zu identifizieren sind. Weiterhin erstellst du eine CSS-Klasse, die die Auszeichnungen für die Bilder beim hovern enthält. Diese wird in einer Funktion über die Eigenschaft className dem zugehörigen Bild zugewiesen.

    Beispiel:
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

    <html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
a{
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
.img_hover{
  border: 1px solid #f00;
}
 //-->
</style>
<script type="text/javascript">
  <!--
function toggleHover(blnHover, strID){
  document.getElementById(strID).className = (blnHover)? 'img_hover' : '';
}
 //-->
</script>
</head>
<body>
<a href="http://www.tutorials.de/" onmouseover="toggleHover(true, 'img_01');" onmouseout="toggleHover(false, 'img_01');">test</a>
<img id="img_01" src="bild1.gif" width="120" height="121" border="0" alt="">
<hr>
<a href="http://www.tutorials.de/" onmouseover="toggleHover(true, 'img_02');" onmouseout="toggleHover(false, 'img_02');">test</a>
<img id="img_02" src="bild2.gif" width="120" height="121" border="0" alt="">
</body>
</html>

    Ciao
    Quaese
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
« Problem mit Menüerstellung | Checkbox austauschen gegen Grafik »

Ähnliche Themen

  1. css bild und text als link
    Von leon_20v im Forum CSS
    Antworten: 21
    Letzter Beitrag: 26.10.10, 12:28
  2. Hover bei Text Link soll Bild in Div anzeigen
    Von gnuisnotunix im Forum CSS
    Antworten: 7
    Letzter Beitrag: 04.08.09, 19:51
  3. text, bild und link einfügen
    Von Berlin_Ses4m im Forum PHP
    Antworten: 3
    Letzter Beitrag: 01.12.07, 01:14
  4. Link aus Text in MySQL-DB auslesen und als Link in HTML ausgeben
    Von dwex im Forum PHP
    Antworten: 2
    Letzter Beitrag: 25.08.05, 20:53
  5. Hintergrund+GFX TExt miteinander verbinden doch wie? ****
    Von reLic im Forum Photoshop
    Antworten: 11
    Letzter Beitrag: 17.08.01, 12:56