CSS: Image-Links-Problem

moidaschl

Vollzeit-Hackler

Registered: Aug 2002
Location: 1210, ABK-D/L
Posts: 4029

06.02.2005 - 00:06

Abend!

Also ich hab eine Tabelle die so aussieht

Code: PHP

<table border="0">
  <tr>
    <td class="forum"><a href="#"></a></td>
    <td></td>
    <td></td>
  </tr>
</table>

und in meiner css Datei sind folgende Zeilen

Code: PHP

td.forum {
	background-image: url(data/images/page/slices/forum.gif);
}
td.forum:hover {
	background-image: url(data/images/page/slices/forum_hover.gif);
}

Es soll einfach immer ein Bild angezeigt werden, ausser wenn man drüberfährt dann soll das "hover" Bild angezeigt werden.

Im Moment bekomm ich gar kein Bild angezeigt.

Ich glaub ich hab da einen Denkfehler und zwar, dass ich das ganze in der A-Class lösen muss, nur hab ich da leider auch keine Ahnung.

Hoffe ihr könnts mir da helfen

tia & mfg
daschl

Bearbeitet von moidaschl am 06.02.2005, 01:05

moidaschl

Vollzeit-Hackler

Registered: Aug 2002
Location: 1210, ABK-D/L
Posts: 4029

06.02.2005 - 00:23

ok ich hab jetz das gleiche nur das class="forum" im A und im css file dann des td. auf a. getauscht.

jetzt gehts, aber nur wenn ich im <td> lauter mache... das kanns ja auch ned sein

wenn ich jetzt aber width und height festlege im <td ...>, dann passiert trotzdem nichts.

edit:

Code: PHP

<td style="width:85px; height:20px"><a href="#" class="forum"></a></td>

liefert leider auch nicht das gewünschte resultat

edit

------------------- SOLVED -------------------
Lösung:

Code: PHP

<table cellspacing="0" border="0" style="empty-cells:show;">
          <tr>
           <td class="forum"><a href="#"><center> </center></a></td>
           <td class="durchsuchen"><a href="#"><center> </center></a></td>
           <td class="admin_login"><a href="#"><center> </center></a></td>
        </table>

und

Code: PHP

A {
	text-decoration: none;
}
td.forum {
	background-image: url(data/images/page/slices/forum.gif);
	width:83px;
	height:20px;
}
td.forum:hover {
	background-image: url(data/images/page/slices/forum_hover.gif);
}
td.durchsuchen {
	background-image: url(data/images/page/slices/durchsuchen.gif);
	width:106px;
	height:20px;
}
td.durchsuchen:hover {
	background-image: url(data/images/page/slices/durchsuchen_hover.gif);
}
td.admin_login {
	background-image: url(data/images/page/slices/admin_login.gif);
	width:103px;
	height:20px;
}
td.admin_login:hover {
	background-image: url(data/images/page/slices/admin_login_hover.gif);
}

mfg

Bearbeitet von moidaschl am 06.02.2005, 01:05

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4541

06.02.2005 - 08:45

Der IE kann :hover nur auf A-Elemente ...
Ich hab fuer sowas immer HTC's verwendet ... sind dann Javascript-Events die du per CSS an Elemente binden kannst. Beispiel http://atvplus.at/main/entertainment/forum/forum.php und lies dazu http://atvplus.at/css/ie.css sowie http://atvplus.at/js/forum_htc.htc .

Ob du jetzt color oder image austauschst ist relativ egal. HTH

moidaschl

Vollzeit-Hackler

Registered: Aug 2002
Location: 1210, ABK-D/L
Posts: 4029

06.02.2005 - 13:38

Ah ich hab jetzt eine viel einfachere Variante gefunden

http://www.tutorials.de/showthread.php?threadid=7309

mfg

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13497

06.02.2005 - 16:13

theoretisch müsste es gehen, wenn du um des td einfach einen anchor setzt... was natürlich eigentlich nicht valid ist, aber im IE funkts dann auch mit td a:hover oder a.class:hover
Bei divs ohne Höhe und Breite kann mit display:block im style von a bzw. a:hover diese Eigenschaft erzwungen werden.

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4541

06.02.2005 - 17:26

Ich wuerde das eher mit Funktionen machen, die beim onload-Event der Seite die Images durchgeht und nachsieht, welche ein onmouseover/out brauchen. Z.b. von http://www.bmracing.com/js/common.js die Funktionen TsAutoHover und TsPreloadImages . Wenn ein Image (oder auch Input type=image) die Klasse autoswap oder auto-swap hat, wird assumed das dass Hover-Image fuer das Element vom src Attribut ein _a hinten angehaengt bekommt. Man muss nur mehr die Namenskonvention beibehalten (kann ja auch einfach abgeaendert werden, wems net paszt) und die CSS-Klasse setzen, im onload-Event die Funktion TsAutoHover aufrufen und fertig. Nix mit inline onmouseover/out usw. In der Version ist eine Art Cache fuers Preloading auch drinnen. Hat in der Praxis gezeigt, dass es einiges an Arbeit abnimmt. Ausserdem braucht man nicht mehr so unnoetige Dinge wie name-Attribut fuer Images. Einzig die CSS-Klasse zuweisen. HTH

Bearbeitet von Rektal am 06.02.2005, 19:11

moidaschl

Vollzeit-Hackler

Registered: Aug 2002
Location: 1210, ABK-D/L
Posts: 4029

06.02.2005 - 20:24

Zitat von Rektal
Ich wuerde das eher mit Funktionen machen, die beim onload-Event der Seite die Images durchgeht und nachsieht, welche ein onmouseover/out brauchen. Z.b. von http://www.bmracing.com/js/common.js die Funktionen TsAutoHover und TsPreloadImages . Wenn ein Image (oder auch Input type=image) die Klasse autoswap oder auto-swap hat, wird assumed das dass Hover-Image fuer das Element vom src Attribut ein _a hinten angehaengt bekommt. Man muss nur mehr die Namenskonvention beibehalten (kann ja auch einfach abgeaendert werden, wems net paszt) und die CSS-Klasse setzen, im onload-Event die Funktion TsAutoHover aufrufen und fertig. Nix mit inline onmouseover/out usw. In der Version ist eine Art Cache fuers Preloading auch drinnen. Hat in der Praxis gezeigt, dass es einiges an Arbeit abnimmt. Ausserdem braucht man nicht mehr so unnoetige Dinge wie name-Attribut fuer Images. Einzig die CSS-Klasse zuweisen. HTH

hmm das hört sich nach einer weitaus sauberen lösung an.

ich werde mir das ganze dann anschauen, weil so wie des jetz ausschaut is des so ein unübersichtlicher code, dass mir das grausen kommt. (weil die file-paths so arschlang sind)
thx mal!

moidaschl Vollzeit-Hackler Registered: Aug 2002 Location: 1210, ABK-D/L Posts: 4029	06.02.2005 - 00:06 Abend! Also ich hab eine Tabelle die so aussieht Code: PHP `<table border="0"> <tr> <td class="forum"><a href="#"></a></td> <td></td> <td></td> </tr> </table>` und in meiner css Datei sind folgende Zeilen Code: PHP `td.forum { background-image: url(data/images/page/slices/forum.gif); } td.forum:hover { background-image: url(data/images/page/slices/forum_hover.gif); }` Es soll einfach immer ein Bild angezeigt werden, ausser wenn man drüberfährt dann soll das "hover" Bild angezeigt werden. Im Moment bekomm ich gar kein Bild angezeigt. Ich glaub ich hab da einen Denkfehler und zwar, dass ich das ganze in der A-Class lösen muss, nur hab ich da leider auch keine Ahnung. Hoffe ihr könnts mir da helfen tia & mfg daschl Bearbeitet von moidaschl am 06.02.2005, 01:05
moidaschl Vollzeit-Hackler Registered: Aug 2002 Location: 1210, ABK-D/L Posts: 4029	06.02.2005 - 00:23 ok ich hab jetz das gleiche nur das class="forum" im A und im css file dann des td. auf a. getauscht. jetzt gehts, aber nur wenn ich im <td> lauter mache... das kanns ja auch ned sein wenn ich jetzt aber width und height festlege im <td ...>, dann passiert trotzdem nichts. edit: Code: PHP `<td style="width:85px; height:20px"><a href="#" class="forum"></a></td>` liefert leider auch nicht das gewünschte resultat edit ------------------- SOLVED ------------------- Lösung: Code: PHP `<table cellspacing="0" border="0" style="empty-cells:show;"> <tr> <td class="forum"><a href="#"><center> </center></a></td> <td class="durchsuchen"><a href="#"><center> </center></a></td> <td class="admin_login"><a href="#"><center> </center></a></td> </table>` und Code: PHP A { text-decoration: none; } td.forum { background-image: url(data/images/page/slices/forum.gif); width:83px; height:20px; } td.forum:hover { background-image: url(data/images/page/slices/forum_hover.gif); } td.durchsuchen { background-image: url(data/images/page/slices/durchsuchen.gif); width:106px; height:20px; } td.durchsuchen:hover { background-image: url(data/images/page/slices/durchsuchen_hover.gif); } td.admin_login { background-image: url(data/images/page/slices/admin_login.gif); width:103px; height:20px; } td.admin_login:hover { background-image: url(data/images/page/slices/admin_login_hover.gif); } mfg Bearbeitet von moidaschl am 06.02.2005, 01:05
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4541	06.02.2005 - 08:45 Der IE kann :hover nur auf A-Elemente ... Ich hab fuer sowas immer HTC's verwendet ... sind dann Javascript-Events die du per CSS an Elemente binden kannst. Beispiel http://atvplus.at/main/entertainment/forum/forum.php und lies dazu http://atvplus.at/css/ie.css sowie http://atvplus.at/js/forum_htc.htc . Ob du jetzt color oder image austauschst ist relativ egal. HTH
moidaschl Vollzeit-Hackler Registered: Aug 2002 Location: 1210, ABK-D/L Posts: 4029	06.02.2005 - 13:38 Ah ich hab jetzt eine viel einfachere Variante gefunden http://www.tutorials.de/showthread.php?threadid=7309 mfg
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13497	06.02.2005 - 16:13 theoretisch müsste es gehen, wenn du um des td einfach einen anchor setzt... was natürlich eigentlich nicht valid ist, aber im IE funkts dann auch mit td a:hover oder a.class:hover Bei divs ohne Höhe und Breite kann mit display:block im style von a bzw. a:hover diese Eigenschaft erzwungen werden.
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4541	06.02.2005 - 17:26 Ich wuerde das eher mit Funktionen machen, die beim onload-Event der Seite die Images durchgeht und nachsieht, welche ein onmouseover/out brauchen. Z.b. von http://www.bmracing.com/js/common.js die Funktionen TsAutoHover und TsPreloadImages . Wenn ein Image (oder auch Input type=image) die Klasse autoswap oder auto-swap hat, wird assumed das dass Hover-Image fuer das Element vom src Attribut ein _a hinten angehaengt bekommt. Man muss nur mehr die Namenskonvention beibehalten (kann ja auch einfach abgeaendert werden, wems net paszt) und die CSS-Klasse setzen, im onload-Event die Funktion TsAutoHover aufrufen und fertig. Nix mit inline onmouseover/out usw. In der Version ist eine Art Cache fuers Preloading auch drinnen. Hat in der Praxis gezeigt, dass es einiges an Arbeit abnimmt. Ausserdem braucht man nicht mehr so unnoetige Dinge wie name-Attribut fuer Images. Einzig die CSS-Klasse zuweisen. HTH Bearbeitet von Rektal am 06.02.2005, 19:11
moidaschl Vollzeit-Hackler Registered: Aug 2002 Location: 1210, ABK-D/L Posts: 4029	06.02.2005 - 20:24 Zitat von Rektal Ich wuerde das eher mit Funktionen machen, die beim onload-Event der Seite die Images durchgeht und nachsieht, welche ein onmouseover/out brauchen. Z.b. von http://www.bmracing.com/js/common.js die Funktionen TsAutoHover und TsPreloadImages . Wenn ein Image (oder auch Input type=image) die Klasse autoswap oder auto-swap hat, wird assumed das dass Hover-Image fuer das Element vom src Attribut ein _a hinten angehaengt bekommt. Man muss nur mehr die Namenskonvention beibehalten (kann ja auch einfach abgeaendert werden, wems net paszt) und die CSS-Klasse setzen, im onload-Event die Funktion TsAutoHover aufrufen und fertig. Nix mit inline onmouseover/out usw. In der Version ist eine Art Cache fuers Preloading auch drinnen. Hat in der Praxis gezeigt, dass es einiges an Arbeit abnimmt. Ausserdem braucht man nicht mehr so unnoetige Dinge wie name-Attribut fuer Images. Einzig die CSS-Klasse zuweisen. HTH hmm das hört sich nach einer weitaus sauberen lösung an. ich werde mir das ganze dann anschauen, weil so wie des jetz ausschaut is des so ein unübersichtlicher code, dass mir das grausen kommt. (weil die file-paths so arschlang sind) thx mal!

CSS: Image-Links-Problem

Forum Index > Software > Coding Stuff

moidaschl

moidaschl

Rektal

moidaschl

Spikx

Rektal

moidaschl