wie dynamisch bilder?

[Daniel]

Hi,
wie oft üblich habe ich bei einer tabelle mit up-down-pfeil imgs eine
sortierhilfe gegeben. nun möchte ich das so optisch noch etwas
aufpeppen.

der code im html sieht in etwa so aus:

<a link="sortierung anders"><img class="down"></a>
<a link="sortierung anders"><img class="up"></a>

und in der CSS so:

a img.down {background:url(./images/down.gif); background-repeat:no-repeat;}
a img.up {background:url(./images/up.gif); background-repeat:no-repeat;}

allerdings zeigt er mir so die bilder garnicht erst an. was ist falsch?
ziel ist es das bei einem :hover das bild ersetzt wird um einen
"Glow"-Effekt zu erzielen.

MfG

[JürgenB]

Hallo Daniel,

du versiehst ein nicht vorhandenes Bild (img ohne src) mit einem Hintergrundbild. Warum nicht <img src="./images/down.gif ...">

Gruß, Jürgen

[Daniel]

Hi,

du versiehst ein nicht vorhandenes Bild (img ohne src) mit einem Hintergrundbild. Warum nicht <img src="./images/down.gif ...">

das hat ich auch schon, aber das hintergrund bild eines bildes sieht
man ja nicht. da kam ich während der raucherpause auf eine idee und
hab es jetzt so gemacht:

  
<a href="aufsteigende sortierung" target="_self"><div class="down">&nbsp;</div></a>  
<a href="absteigende sortierung" target="_self"><div class="up">&nbsp;</div></a>  

  
a div.down {background:url(./images/down.gif); background-repeat:no-repeat; display: inline;}  
a div.up {background:url(./images/up.gif); background-repeat:no-repeat; display: inline;}  
a:hover div.down {background:url(./images/down_glow.gif); background-repeat:no-repeat; border: 5px; display: inline;}  
a:hover div.up {background:url(./images/up_glow.gif); background-repeat:no-repeat; display: inline;}  

nun hab ich nur das problem das das div zu klein ist.

daher hab ich nun ein anderes problem. wie komme ich mit PHP an die mase des bildes? um die größe des divs anzupassen?

MfG

[wahsaga]

hi,

da kam ich während der raucherpause auf eine idee und
hab es jetzt so gemacht:

<a href="aufsteigende sortierung" target="_self"><div class="down">&nbsp;</div></a>
<a href="absteigende sortierung" target="_self"><div class="up">&nbsp;</div></a>

  
a darf kein div enthalten.  
  
warum willst du überhaupt in das a noch ein weiteres element hineinlegen?  
verpasse doch gleich dem a das hintergrundbild!  
  
(um a eine breite/höhe zuweisen zu können, musst du es zu einen block element machen, bzw. floaten lassen.)  
  
gruß,  
wahsaga  
  

-- 
/voodoo.css:  
#GeorgeWBush { position:absolute; bottom:-6ft; }

[Daniel]

Hi,

a darf kein div enthalten.

nicht? dann vll ein <span>

warum willst du überhaupt in das a noch ein weiteres element hineinlegen?

na wegen dem bild

verpasse doch gleich dem a das hintergrundbild!

das geht? *test* tatsächlich

(um a eine breite/höhe zuweisen zu können, musst du es zu einen block element machen, bzw. floaten lassen.)

scheint nicht zu funktionieren.

  
<a href="absteigende sortierung" target="_self" class="down">&nbsp;</a>  
<a href="aufsteigende sortierung" target="_self" class="up">&nbsp;</a>  

  
a.down {background:url(./images/down.gif); background-repeat:no-repeat; float: right;}  
a.up {background:url(./images/up.gif); background-repeat:no-repeat; float: right;}  
a.down:hover {background:url(./images/down_glow.GIF); background-repeat:no-repeat; border: 5px; float: right;}  
a.up:hover {background:url(./images/up_glow.GIF); background-repeat:no-repeat; float: right;}  

Mfg

[Daniel]

Hi,
also irgendwie hamn mir deine tips nix direkt gebracht. aber nach etwas
rumsuchen hab ich folgende im FF funktionierende lösung gefunden:

  
<a href="absteigend" target="_self" class="down">&nbsp;</a>  
<a href="aufsteigend" target="_self" class="up">&nbsp;</a>  

  
a.down {background:url(./images/down.gif); background-repeat:no-repeat; margin: 0px; padding-left: 5px; padding-right:5px;}  
a.up {background:url(./images/up.gif); background-repeat:no-repeat; margin: 0px; padding-left: 5px; padding-right:5px;}  
a.down:hover {background:url(./images/down_glow.GIF);}  
a.up:hover {background:url(./images/up_glow.GIF); }  

Aber irgendwie etwas unelegant, finde ich.

MfG

[Frederik]

Hi!

daher hab ich nun ein anderes problem. wie komme ich mit PHP an die mase des bildes? um die größe des divs anzupassen?

mit getimagesize(). Aber trotzdem würde ich das background-image gleich dem a zuweisen, das auf display:block setzen und dann die ermittelten Werte für width und height zuweisen.

Obwohl Du die eigentlich auch gleich festlegen kannst, da Du doch nicht ständig andere Bilder nimmst, oder? Und das normale und das hover-Bild sollten sowieso die gleichen Maße haben, damit der Effekt nicht "springt".

LG
Fredo