title image


Smiley Pseudo-Transparenz
Hi,



dieses Pseudo-Transparenz Effekt über Slices wurde mit Adobe Photoshop Image Ready erstellt.



Ich versuch' dir mal ne Anleitung anhand dieser Seite zu geben, wie du's den teuren Softwares gleich/besser machen kannst...



Vorweg gesagt, ich habe den Image Ready - Code für den Effekt etwas vereinfacht und um es für dieses Beispiel zu raffen das Preloader-Skript weggelassen.



Hier schonmal das Ergebnis: Online-Demo, Download



Man hat erstmal die Menü-Grafik:







Dann zerteilt man die Grafik in folgende Einzelgrafiken für die Menübuttons und die Hintergrundgrafik der pseudo-transparenten Texte (oben0.jpg, oben1.jpg, usw.):







Danach kann man in seinem Bildbearbeitungsprogramm für jeden Menübutton (oben0.jpg, oben1.jpg, usw.) eine Ebene mit einem halb-transparenten/milchigen Viereck und dem Text darüber setzen.



Diese Grafik zerteilt man wiederum in folgende Einzelgrafiken (oben0_unten0.jpg, oben0_unten1.jpg, ... oben3_unten0.jpg, oben3_unten1.jpg, usw.):







Nun hat man alle benötigten Bilder und kann sich dem HTML-Code widmen.



Man benötigt eine Tabelle mit 2 Zeilen (á 10 Spalten für 5 Menüs und je 1 Abstandsgrafik), Menü (Button, Abstandgrafik, Button, Abstandgrafik usw.) und "Untermenü".



Jetzt kommt das Interessante.

Bei den Buttons musst du für den Darüber- und Herunterfahren-Status einen Aufruf meiner angepassten changeImages-Funktion, welche bestimmte Bilder in der 2. Zeile austauscht.

Zu übergeben sind 2 Parameter index (für onMouseOver ist der Bildindex und für onMouseOut -1 zu übergeben) und eine Liste img_list mit den Indexen der Bilder in der zweiten Zeile, die ausgetauscht werden sollen, da darüber die pseudo-transparente Text-Grafik ganz oder teilweise liegt):







<td>

<a href="seite1.html"

onMouseOver="changeImages(0,new Array(0,1,2,3,4)); return true;"

onMouseOut="changeImages(-1,new Array(0,1,2,3,4)); return true;">

<img src="bilder/oben0.jpg"></a></td>

<td><img src="bilder/oben1.jpg"></td>







Nach jedem Button setzt du dann einfach eine Abstandsgrafik:







<td><img src="bilder/oben1.jpg"></td>







In der 2 Zeile setzt du in jede der 10 Zellen eine Grafik mit Name-Attribut:







<td><img name="unten0" src="bilder/unten0.jpg"></td>







Das war's.



Der Code sieht dann wie folgt aus:







<html>

<head>

<style type="text/css">

<!--



table

{

margin:auto;

}



img

{

border-width:0px;

}



-->

</style>

<script language="JavaScript">

<!--



function changeImages(index,img_list)

{

if (document.images)

{

var pre = "unten";



if(index > -1)

{

pre = "oben" + index + "_" + pre;

}



for (var i=0; i<img_list.length; i++)

{

document["unten" + img_list[i]].src = bilder_verzeichnis + pre + img_list[i] + ".jpg";

}

}

}



var bilder_verzeichnis = "bilder/";



//-->

</script>

</head>

<body>

<table cellspacing="0" cellpadding="0" style="width:100%; height:100%;">

<tr>

<td style="text-align:center; vertical-align:middle;">

<table cellspacing="0" cellpadding="0">

<tr>

<td>

<a href="seite1.html"

onMouseOver="changeImages(0,new Array(0,1,2,3,4)); return true;"

onMouseOut="changeImages(-1,new Array(0,1,2,3,4)); return true;">

<img src="bilder/oben0.jpg"></a></td>

<td><img src="bilder/oben1.jpg"></td>

<td>

<a href="seite2.html"

onMouseOver="changeImages(1,new Array(2,3,4,5,6)); return true;"

onMouseOut="changeImages(-1,new Array(2,3,4,5,6)); return true;">

<img src="bilder/oben2.jpg"></a></td>

<td><img src="bilder/oben3.jpg"></td>

<td>

<a href="seite3.html"

onMouseOver="changeImages(2,new Array(3,4,5,6,7,8)); return true;"

onMouseOut="changeImages(-1,new Array(3,4,5,6,7,8)); return true;">

<img src="bilder/oben4.jpg"></a></td>

<td><img src="bilder/oben5.jpg"></td>

<td>

<a href="seite4.html"

onMouseOver="changeImages(3,new Array(6,7,8)); return true;"

onMouseOut="changeImages(-1,new Array(6,7,8)); return true;">

<img src="bilder/oben6.jpg"></a></td>

<td><img src="bilder/oben7.jpg"></td>

<td>

<a href="seite5.html"

onMouseOver="changeImages(4,new Array(4,5,6,7,8)); return true;"

onMouseOut="changeImages(-1,new Array(4,5,6,7,8)); return true;">

<img src="bilder/oben8.jpg"></a><img src="bilder/oben9.jpg"></td>

</tr>

<tr>

<td><img name="unten0" src="bilder/unten0.jpg"></td>

<td><img name="unten1" src="bilder/unten1.jpg"></td>

<td><img name="unten2" src="bilder/unten2.jpg"></td>

<td><img name="unten3" src="bilder/unten3.jpg"></td>

<td><img name="unten4" src="bilder/unten4.jpg"></td>

<td><img name="unten5" src="bilder/unten5.jpg"></td>

<td><img name="unten6" src="bilder/unten6.jpg"></td>

<td><img name="unten7" src="bilder/unten7.jpg"></td>

<td><img name="unten8" src="bilder/unten8.jpg"></td>

</tr>

</table>

</td>

</tr>

</table>

</body>

</html>







MfG Murdoch!

aktuelle Winamp Playlist                Hörgewohnheiten (Last.fm)



geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: