21 Nov

Einfaches CSS Image-RollOver ohne Javascript

Hier ein kleines CSS Snippet, was man sicher öfter mal gebrauchen kann. Mit diesem Snippet erreicht man ein simples Imgage-RollOver, wo das Bild durch ein anderes ausgetauscht wird, wenn man mit der Mouse drüber fährt. Einfach deshalb, weil man sonst immer nur Beispiele mit fetten Javascriptcode findet, wenn man das mal braucht…

 

1
<a title="Facebook" class="img_rollover" href="http://www.facebook.com/MarioPriebe"></a>
1
2
3
4
5
6
7
8
9
10
/*CSS für ImageRollOver  */
a.img_rollover:link, .img_rollover{
	width:32px;
	height:32px;
        display:block;
	background-image:url(images/icon32_facebook_off-2.png);
}
a.img_rollover:hover{
	background-image:url(images/icon32_facebook_on.png);
}

Möchte man mehrere Icons / Images nebeneinander abbilden, setzt man noch ein float:left; in die Definition.

Viel Spaß beim entwickeln : )

27 Jan

Flash in den Hintergrund zwingen

Flash hat die Eingenschaft, sich durch das <object>  immer in den Vordergrund zu drücken und egal welchen z-index man wählt, ist es nicht möglich einen CSS Container über das Flash zu legen.

Sei denn man fügt dem FlashObject folgenden xhtml validen Parameter hinzu:

<param name="wmode" value="transparent" />

Nun kann man mit z-index auch wieder die Ebenen bestimmen.
Beispiel:

1
2
3
4
<object type="application/x-shockwave-flash" data="test.swf" width=640" height="480">
<param name="wmode" value="transparent" />
<param name="src" value="test.swf" />
</object>
22 Okt

Online-Generatoren für den Hintergrund

Hier eine kleine Auswahl an Online Generatoren für den Webseiten-Hintergrund.

Einfach gewünschtes Muster generieren und wie gewohnt per CSS einbinden:

background:#FARBE url(PFAD/MUSTER.PNG) repeat;

gemusterte Texturen bekommt man bei bgpatterns


Mustertexturen bei TarganMaker

stripegenerator generiert gestreifte Hintergründe


weitere Streifenhintergünde bei StripeDesigner


und nochmal bei stripemania


Pixelknete generiert Punkte


und bei BGMaker zeichnet man seinen Hintergrund selbst