[CSS] muss javascript wirklich sein?

[paetz]

ich hab in meim quelltext die kleene funktion, die ja jeder kennt:

function Bild(x,bild)
{
document.images[x].src = bild;
}

bei langsamen i-net verbindungen dauert es aber meist n paar sekunden um eben ein neues bild mit "onMouseover" und "onmouseout" über das alte zu legen.

geht das ni irgendwie vielleicht mit css?

oder gibts da ne js-funktion die das irgendie beschleunigt, so dass beim drübergehn über das bild mit der maus sofort n neues bild kommt?

danke im voraus

[mcmurphy]

oder gibts da ne js-funktion die das irgendie beschleunigt, so dass beim drübergehn über das bild mit der maus sofort n neues bild kommt?

preloade doch die Bilder...

[Wurzel]

such mal in den codeschnipsel nach dem nick "innuendo", da gab es was ... alternativ http://www.alistapart.com/topics/code/css/, dort sind ähnliche beispiele. laden musst du das bild aber trotzdem

[paetz]

Preloaden???

[wahsaga]

Original geschrieben von paetz
Preloaden???

googlen???

[mcmurphy]

na, entweder holst du dir die Bilder per html:

<img src="mingImage.jpg" border="0" width="0" height="0"  alt="" /> 

width & height auf null; kann aber ev. Pixeleffekte geben
oder per JS:

 function preload(){
             var myArray = new Array()
             myArray[1]=new Image();
             myArray[1].src="../myicons/menue/00_01.gif";
             myArray[2]=new Image();
             myArray[2].src="../myicons/menue/01_01.gif";
             myArray[3]=new Image();
             myArray[3].src="../myicons/menue/03_01.gif";
/* etc. pp. */
} 

im body mit onload="preload()" aufrufen...

[mcmurphy]

wahsaga, ick liebe dir

[tomstig]

CSS: hier klicken => mit der maus über "fullack!" fahren

[mcmurphy]

wie haste det realisiert?

[Kropff]

wie haste det realisiert?

mit pfusch, komplett transparentes gif und und dann wird das hintergrundbild per css einfach ausgetauscht.

gruß
peter

[mcmurphy]

Fragte weil das:

<a href="http://www.fullack.com/index.php?act=ST&amp;t=random" alt="fullack?">
<img src="style_images/2/spacer.gif" alt="" height="40" width="125">
</a> 

ist ja der relevante Bereich, sehe nur nirgends ne id, wie beschränkste denn den a:hover hintergrund bild austausch auf diesen einen Link

[wahsaga]

Original geschrieben von mcmurphy
ist ja der relevante Bereich, sehe nur nirgends ne id, wie beschränkste denn den a:hover hintergrund bild austausch auf diesen einen Link

Du möchtest dich über Selektoren in CSS informieren - beispielsweise über so feine Dinger wie den Nachfahrenselektor.

[mcmurphy]

Glatt übersehen:
<div class="fullackbtn"> gehört ja zu:
<a href="http://www.fullack.com/index.php?act=ST&amp;t=random" alt="fullack?">
<img src="style_images/2/spacer.gif" alt="" height="40" width="125">
</a>
</div>

und:

.fullackbtn a:hover {
    background-image:url(../style_images/2/fullack_btn.gif);
    background-position: 0 -40px;
} 

Wahsaga
P.S.: Ich lerne gerne....

[tomstig]

Original geschrieben von Kropff
mit pfusch, komplett transparentes gif und und dann wird das hintergrundbild per css einfach ausgetauscht.

gruß
peter

Ist nicht mein Werk, aber ist trotzdem schön, dass du so objektiv und flamefrei darüber urteilst.
Weil wenn du genau geschaut hättest, hat das div mit dem "Button" ein background-image das durch ein hover um 20px hinaufverschoben wird - nicht ausgetauscht, weil das würde Ladevorgang erzeugen...

btw: das smiley, das du hier vorgeschlagen hast, passt hier bestens:

[Kropff]

Ist nicht mein Werk, aber ist trotzdem schön, dass du so objektiv und flamefrei darüber urteilst.

herrgott sei doch nicht gleich beleidigt, ich arbeite sehr oft auf selbe art und weise. außerdem -> pfuschen gehört zum handwerk

gruß
peter