nicht angemeldet
Hover Effekt
Hi,
gleich vor weg ich bin noch ein Anfänger auf dem Gebiet, es wäre nett wenn ihr mir den vollständigen Quellcode für mein Problem posten würdet.
Ich möchte erreichen, dass die thumbnails in meiner Gallerie gehighlighted werden beim überfahren mit der Maus. Dies soll folgendermaßen aussehen, es erscheint ein border 2px um das thumbnail, beim überfahren mit der Maus.
Mein Quellcode sieht bis jetzt so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<title>[GALLERIE]</title>
</head>
<body bgcolor="#FFFFFF" background="background03.jpg">
<table border="0" cellpadding="0" cellspacing="0" width="100%"
height="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="5" width="440">
<tr>
<td width="110" height="110" bordercolor="#000000" bgcolor=
"#C0C0C0"><img border="0" src="thumb/thumb_blank.jpg" width="110"
height="83"></td>
<td width="110" height="110" bordercolor="#000000" bgcolor=
"#C0C0C0"><img border="0" src="thumb/thumb_blank.jpg" width="110"
height="83"></td>
<td width="110" height="110" bordercolor="#000000" bgcolor=
"#C0C0C0"><img border="0" src="thumb/thumb_blank.jpg" width="110"
height="83"></td>
<td width="110" height="110" bordercolor="#000000" bgcolor=
"#C0C0C0"><img border="0" src="thumb/thumb_blank.jpg" width="110"
height="83"></td>
</tr>
<tr>
<td width="110" height="110" bordercolor="#000000" bgcolor=
"#C0C0C0"><img border="0" src="thumb/thumb_blank.jpg" width="110"
height="83"></td>
<td width="110" height="110" bordercolor="#000000" bgcolor=
"#C0C0C0"><img border="0" src="thumb/thumb_blank.jpg" width="110"
height="83"></td>
<td width="110" height="110" bordercolor="#000000" bgcolor=
"#C0C0C0"><img border="0" src="thumb/thumb_blank.jpg" width="110"
height="83"></td>
<td width="110" height="110" bordercolor="#000000" bgcolor=
"#C0C0C0"><img border="0" src="thumb/thumb_blank.jpg" width="110"
height="83"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Vielen Dank für die Hilfe!
MfG Hahn
-
Hi!
Ich möchte erreichen, dass die thumbnails in meiner Gallerie gehighlighted werden beim überfahren mit der Maus. Dies soll folgendermaßen aussehen, es erscheint ein border 2px um das thumbnail, beim überfahren mit der Maus.
Seit CSS 2 gibt es die Pseudoklasse :hover auch für andere Elemente wie Links. Leider setzt der IE das natürlich wieder nicht um. Wenn du dies verkraften kannst lautet die Syntax
[element z.B. img]:hover{
border: 2px solid blue;
}---------------------------------------------------------
Grüße,
Fabian St.
-
Hi,
border: 2px solid blue;
ich sagte ja bereits ich bin noch beim lernen und so habe ich meine Probleme deinen Syntax umzusetzen. Vielleicht könnstet du ihn in ein Stück von meinem Quelltext einbauen?
MfG Hahn
-
Hi,
»»Vielleicht könnstet du ihn in ein Stück von meinem Quelltext einbauen?
Problem gelöst.
Vielen Dank für eure Hilfe!
MfG Hahn
-
Hi,
Problem gelöst.
doch noch nicht ganz. Beim überfahren mit der Maus verschiebt sich mein Tabellenlayout (Schrift und andere Bilder) verrücken. Wie kann ich dies unterbinden?
MfG Hahn
-
Hi!
doch noch nicht ganz. Beim überfahren mit der Maus verschiebt sich mein Tabellenlayout (Schrift und andere Bilder) verrücken. Wie kann ich dies unterbinden?
Indem du den Thumbnails bereits von vornherein einen border in Hintergundfarbe mit gleicher Dicke gibst.
---------------------------------------------------------
Grüße,
Fabian St.
-
Hi!
Indem du den Thumbnails bereits von vornherein einen border in Hintergundfarbe mit gleicher Dicke gibst.
Dies ist bei mir leider nicht möglich, da ich eine Grafik als Hintergrund verwende. Gibt es etwa eine Transparentefarbe o.ä.?
MfG Hahn
-
Hallo,
Dies ist bei mir leider nicht möglich, da ich eine Grafik als Hintergrund verwende. Gibt es etwa eine Transparentefarbe o.ä.?
als Rahmenfarbe ist auch 'transparent' erlaubt (->http://de.selfhtml.org/css/eigenschaften/rahmen.htm#border_color).
Grüße aus Nürnberg
Tobias--
Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|-
Hi,
habs folgendermaßen probiert. Problem: Die Grafiken sind weg!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title></title><style type='text/css'>
img{
border:0px;
}
a:hover img{
border : 2px solid #FF8000;
}
</style></head>
<body bgcolor="#FFFFFF" background="background04.jpg">
<table cellspacing="5">
<td><b><style="border-color:transparent; border-width:2px; border-style:solid;" src="button01.jpg" width="133" height="36"></b></td><td><b><font color="#FFFFFF">Gallerie</font></b></td><tr>
<td><a href="articles.html"><font color="#FFFFFF"><style="border-color:transparent; border-width:2px; border-style:solid;" src="button_articles.jpg" width="133" height="36"></font></a></td><td><b><font color="#FFFFFF">Articles</font></b></td><tr>
<td><a href="wallpaper.html"><font color="#FFFFFF"><style="border-color:transparent; border-width:2px; border-style:solid;" src="button_wallpaper.jpg" width="133" height="36"></font></a></td><td><b><font color="#FFFFFF">Wallpaper</font></b></td>
</table>
</body>
</html>MfG Hahn
-
Hallo,
<style="border-color:transparent; border-width:2px; border-style:solid;" src="button01.jpg" width="133" height="36">
schau nochmal genau hin - was siehst du? Richtig - es fehlt ein 'img' vor dem 'style' (und ein alt-Attribut) :-)
Grüße aus Nürnberg
Tobias--
Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|-
Hi,
der border scheint transparent zu sein, nur funktioniert der Hover Effekt nicht mehr.
MfG Hahn
-
Hi!
der border scheint transparent zu sein, nur funktioniert der Hover Effekt nicht mehr.
Wie schaut denn jetzt der ganze Code aus?
---------------------------------------------------------
Grüße,
Fabian St.
-
Hi,
Problem gelößt!
MfG Ringspun
-
-
-
-
Hi!
<td><b><style="border-color:transparent; border-width:2px; border-style:solid;" src="button01.jpg" width="133" height="36"></b></td>
Das Problem liegt hier. Es gibt keinen <style>-Tag! Wenn du das CSS nicht im <head>-Bereich definieren willst gibt es das style-Attribut.
Richtig müsste es also heißen:<td><b><img src="button01.jpg" alt="Button" style="border:2px solid transparent" width="133" height="36" /></b></td>
Für die anderen Spalten musst du es analog machen.
---------------------------------------------------------
Grüße,
Fabian St.
-
Hi,
Es gibt keinen <style>-Tag!
Doch, selbstverständlich gibt es style-tags.
Wenn du das CSS nicht im <head>-Bereich definieren willst
Wie definierst Du denn CSS im head-Bereich _ohne_ style-tags?
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
-
-
-
Hi!
Dies ist bei mir leider nicht möglich, da ich eine Grafik als Hintergrund verwende. Gibt es etwa eine Transparentefarbe o.ä.?
Es gibt mit CSS die Möglichkeit, die Hintergundfarbe mittels background:transparent; transparent zu machen. Du könntest mal versuchen border:2px solid transparent; -glaube aber nicht das es funktioniert.
---------------------------------------------------------
Grüße,
Fabian St.
-
Hi!
Es gibt mit CSS die Möglichkeit, die Hintergundfarbe mittels background:transparent; transparent zu machen. Du könntest mal versuchen border:2px solid transparent; -glaube aber nicht das es funktioniert.
siehe: [pref:t=82734&m=482665]
==> es funktioniert---------------------------------------------------------
Grüße,
Fabian St.
-
-
-
-
-
-
Hi!
border: 2px solid blue;
ich sagte ja bereits ich bin noch beim lernen und so habe ich meine Probleme deinen Syntax umzusetzen. Vielleicht könnstet du ihn in ein Stück von meinem Quelltext einbauen?
Wenns da schon hakt empfehl ich dir das hier mal http://de.selfhtml.org/css/formate/einbinden.htm
Da ich aber heute einen guten Tag habe, will ich mal nicht so sein :-)
Du musst zwischen den <head> und </head> - Tag folgenden Code einfügen:<style type="text/css">
img:hover{
border: 2px solid blue;
}
</style>Aber wie gesagt, das unterstützt, bisher nur der Mozilla, der IE kennt das wieder mal nicht.
---------------------------------------------------------
Grüße,
Fabian St.
-
Hallo Fabian,
Aber wie gesagt, das unterstützt, bisher nur der Mozilla,
Opera auch.
Grüße aus Nürnberg
Tobias--
Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|-
Hi!
Aber wie gesagt, das unterstützt, bisher nur der Mozilla,
Opera auch.Standardkonforme Browser eben :-)
---------------------------------------------------------Grüße,
Fabian St.
-
Hallo Fabian,
Standardkonforme Browser eben :-)
Im Grunde reicht doch schon »Browser«.
Liebe Grüße,
David-
Hi!
Hallo Fabian,
Standardkonforme Browser eben :-)
Im Grunde reicht doch schon »Browser«.
Wie recht du doch hast :-) :-)
---------------------------------------------------------Grüße,
Fabian St.
-
-
-
-
-
-
-
Hi,
gleich vor weg ich bin noch ein Anfänger auf dem Gebiet, es wäre nett wenn ihr mir den vollständigen Quellcode für mein Problem posten würdet.
Wenn du
<style type='text/css'>
img{
border:0px;
}
a:hover img{
border : 2px solid Blue;
}
</style>in den head-Beecih deines Dokuments einfügst, sollte es zumindest im Mozilla laufen. Damit wird für alle Img-Elemente, die innerhalb eine "gehoverten" Tags liegen, der entsprechende Rahmen definiert.
<title>[GALLERIE]</title>
Galerie schreibt man mit nur einem 'l'. (Sorry für diese Meckerei, aber ich kann diese ganzen 'Gallerien' nicht mehr ertragen.
HTH
ortenau-s-bahner
--
ss:} zu:$ ls:} fo:| de:] va:) ch:? sh:( n4:# rl:? br:> js:| ie:( fl:{ mo:)