CSS: Image-Links-Problem

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_image-links-problem_136176/page_1 - zur Vollversion wechseln!

moidaschl schrieb am 06.02.2005 um 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

moidaschl schrieb am 06.02.2005 um 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

Rektal schrieb am 06.02.2005 um 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 schrieb am 06.02.2005 um 13:38

Ah ich hab jetzt eine viel einfachere Variante gefunden

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

mfg

Spikx schrieb am 06.02.2005 um 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 schrieb am 06.02.2005 um 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

moidaschl schrieb am 06.02.2005 um 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!