Loading...   Upload Image

Hover Effekt??Forum » Webzone » (X)HTML & CSS » Hover Effekt??

Neues Thema verfassen Neues Thema

  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    21.09.2009 um 14:10 Uhr

    hey
    ich benutze Adobe Photoshop CS4 und bin grad dabei ein neues lay zu erstellen nur kapier ich des mit dem Hover Effekt irgendwie nicht könnt mir jemand helfen ich hab schon ein tutorial gelesen nur nix kapiert.
    Danke



  • HRJelUser ist offline
    Newbie



    Registriert: 27.03.2008
    Beitraege: 3

    22.09.2009 um 20:53 Uhr

    Habe zwar kein Photoshop CS4, allerdings ist das ganz einfach.
    Sagen wir mal, du möchtest für deine Navigation deiner Homepage (Navi = besteht aus gelinkten Bildern) Hover-Effekte benutzen.
    Du erstellt ein Bild, auf dem zum Beispiel "Home" steht.
    Das speicherst du als home.png (oder home.jpg). Dann machst du etwas anderes aus dem Bild. Zum Beispiel kannst du dieses "Home" durchstreichen, einen Tintenfleck hinzusetzen, die Schrift verändern (Farbe, Schriftart, fett/kursiv) etc.
    Das speicherst du dann als home_.png, home2.png, home_hover.png etc. ... der Dateiname ist eigentlich egal.

    Dann fügst du das samt Code in deine Homepage ein.

    Hast du das mit dem Erstellen der Bilder verstanden? Falls nein, frag ruhig. Ich habe eh keine Hobbies D":
    Der Code muss ja hier irgendwo als Tutorial zu finden sein. ;)

    xoxo, jel. :>



  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    23.09.2009 um 13:48 Uhr

    das mit dem code ist grad bei mir das problem ich kapier nicht wo ich das bild einfügen muss danke das du überhaupt geantwortet hast :)



  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 690

    25.09.2009 um 17:06 Uhr

    Wie schaut denn dein code aus?



  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    25.09.2009 um 17:31 Uhr

    hey hier ist mein Index, ich hab deeshalb mein index mit gegeben weil immer wenn ich den header cod mit den links in mein index packe erkennt er die links nciht aber immer wenn ich das unten stehene script rausmache funkt es wider ist mein Index irgend wie falsch??

    <html>
    <head>
    <title>paramore+</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- Save for Web Slices (paramore+.psd) -->
    <table id="Tabelle_01" width="1001" height="580" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td colspan="9">
    			<img src="Bilder/paramore_01.png" width="1000" height="521" alt=""></td>
    		<td>
    			<img src="Bilder/Abstandhalter.gif" width="1" height="521" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="7">
    			<img src="Bilder/paramore_02.png" width="894" height="12" alt=""></td>
    		<td rowspan="3">
    			<a href="http://acy.ac.ohost.de/Twitter.html"target="home">
    				<img src="Bilder/paramore+_03.png" width="105" height="49" border="0" alt=""></a></td>
    		<td rowspan="4">
    			<img src="Bilder/paramore_04.png" width="1" height="59" alt=""></td>
    		<td>
    			<img src="Bilder/Abstandhalter.gif" width="1" height="12" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="3">
    			<a href="http://acy.ac.ohost.de/cutenews/news.php"target="home">
    				<img src="Bilder/paramore+_05.png" width="124" height="47" border="0" alt=""></a></td>
    		<td colspan="5">
    			<img src="Bilder/paramore_06.png" width="626" height="1" alt=""></td>
    		<td rowspan="3">
    			<a href="http://acy.ac.ohost.de/Fanstuff.html"target="home">
    				<img src="Bilder/paramore+_07.png" width="144" height="47" border="0" alt=""></a></td>
    		<td>
    			<img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    	</tr>
    	<tr>
    		<td rowspan="2">
    			<a href="http://acy.ac.ohost.de/siteholly.html"target="home">
    				<img src="Bilder/paramore+_08.png" width="86" height="46" border="0" alt=""></a></td>
    		<td rowspan="2">
    			<a href="http://acy.ac.ohost.de/Youtubechannel.html"target="home">
    				<img src="Bilder/paramore+_09.png" width="139" height="46" border="0" alt=""></a></td>
    		<td rowspan="2">
    			<img src="Bilder/paramore_10.png" width="245" height="46" alt=""></td>
    		<td rowspan="2">
    			<a href="http://acy.ac.ohost.de/Gallery/index.php">
    				<img src="Bilder/paramore+_11.png" width="146" height="46" border="0" alt=""></a></td>
    		<td rowspan="2">
    			<img src="Bilder/paramore_12.png" width="10" height="46" alt=""></td>
    		<td>
    			<img src="Bilder/Abstandhalter.gif" width="1" height="36" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="Bilder/paramore_13.png" width="105" height="10" alt=""></td>
    		<td>
    			<img src="Bilder/Abstandhalter.gif" width="1" height="10" alt=""></td>
    	</tr>
    </table>
    <!-- End Save for Web Slices -->
    </body>
    </html>
    
    <html>
    <head>
    </head>
    
    
    
    <body>
    
    
    
     <body bgcolor="#acacac" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="">
    
    
    
    
    <span style="position: absolute; left: 0; top: 580"><iframe name="navi" width="235" height="1900" src="file:///C:/Users/Acalya/Desktop/navi.html" border="0" frameborder="0" marginwidth="6" marginheight="6"></iframe>
    
    <span style="position: absolute; left: 225; top: "><iframe name="home" width="570" height="2500" src="http://acy.ac.ohost.de/cutenews/news.php" border="0" frameborder="0" marginwidth="6" marginheight="6"></iframe>
    
    <span style="position: absolute; left: 560; top: 0"><iframe name="navi" width="230" height="1900" src="file:///C:/Users/Acalya/Desktop/navi%202.html" border="0" frameborder="0" marginwidth="6" marginheight="6"></iframe>
    
    <div style="position: absolute; left: -785; top: -583; width: 463; height: 276">
    
    <script language="JavaScript1.2">
    
    /***********************************************
    * Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var variableslide=new Array()
    
    //variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"]
    
    variableslide[0]=['file:///C:/Users/Acalya/Desktop/paramore%20lay/bild.png', '', '']
    variableslide[1]=['file:///C:/Users/Acalya/Desktop/paramore%20lay/bild1.png', '', '']
    variableslide[2]=['file:///C:/Users/Acalya/Desktop/paramore%20lay/bild2.png', '', '']
    
    //configure the below 3 variables to set the dimension/background color of the slideshow
    
    var slidewidth='0px' //set to width of LARGEST image in your slideshow
    var slideheight='0px' //set to height of LARGEST iamge in your slideshow, plus any text description
    var slidebgcolor='#666161'
    
    //configure the below variable to determine the delay between image rotations (in miliseconds)
    var slidedelay=3000
    
    ////Do not edit pass this line////////////////
    
    var ie=document.all
    var dom=document.getElementById
    
    for (i=0;i<variableslide.length;i++){
    var cacheimage=new Image()
    cacheimage.src=variableslide[i][0]
    }
    
    var currentslide=0
    
    function rotateimages(){
    contentcontainer='<center>'
    if (variableslide[currentslide][1]!="")
    contentcontainer+='<a href="'+variableslide[currentslide][1]+'">'
    contentcontainer+='<img src="'+variableslide[currentslide][0]+'" border="0" vspace="3">'
    if (variableslide[currentslide][1]!="")
    contentcontainer+='</a>'
    contentcontainer+='</center>'
    if (variableslide[currentslide][2]!="")
    contentcontainer+=variableslide[currentslide][2]
    
    if (document.layers){
    crossrotateobj.document.write(contentcontainer)
    crossrotateobj.document.close()
    }
    else if (ie||dom)
    crossrotateobj.innerHTML=contentcontainer
    if (currentslide==variableslide.length-1) currentslide=0
    else currentslide++
    setTimeout("rotateimages()",slidedelay)
    }
    
    if (ie||dom)
    document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
    
    function start_slider(){
    crossrotateobj=dom? document.getElementById("slidedom") : ie? document.all.slidedom : document.slidensmain.document.slidenssub
    if (document.layers)
    document.slidensmain.visibility="show"
    rotateimages()
    }
    
    if (ie||dom)
    start_slider()
    else if (document.layers)
    window.onload=start_slider
    
    </script>
    
    <ilayer id="slidensmain" width=&{slidewidth}; height=&{slideheight}; bgColor=&{slidebgcolor}; visibility=hide><layer id="slidenssub" width=&{slidewidth}; left=0 top=0></layer></ilayer>
    
    
    </body>



  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 690

    25.09.2009 um 19:53 Uhr

    Also du musst einfach folgenden validen Mini-Java-Script-Code anstelle deiner verlinkten Bild-Elemente einfügen (funktioniert - ist auch bei meiner Website im Einsatz) - bei deaktiviertem Javascript funktioniert der Link immer noch, der Hover-effekt alledings nicht:

    <a href="LINKADRESSE"><img style="border: 0px solid ; width: BILDGÖSSE; height: BILDHÖHE;" alt="TAG" id="IMAGE_ID_1" src="BILD_NORMAL" onmouseover='document.getElementById("id="IMAGE_ID_1" " ).src="BILD_HOVER"' onmouseout='document.getElementById("IMAGE_ID_1 " ).src="BILD_NORMAL"' align="top"/></a>

    Wichtig: Das Hover-Bild (wenn man mit der Maus darüber fährt) muss genauso groß sein, wie das andere. Die IMAGE_ID muss bei jedem Link anders sein! (Innerhalb des Links gleich)



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 25.09.2009 um 19:54 Uhr ...
  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    25.09.2009 um 21:36 Uhr

    was ist die IMAGE_ID??



  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 690

    26.09.2009 um 18:57 Uhr

    Das ist einfach eine einmalige Zahl pro Seite/eine Buchstabenkombination - du kannst eigentlich alles nehmen, Leerzeichen o.ä. würde ich allerdings vermeiden. Der Übersicht halber beginne ich immer mit 000 und höre dann mit 999 auf ;)



  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    26.09.2009 um 20:21 Uhr

    also irgendwie geht es immer noch nicht des ist die zeile wo cih gerade editiert habe schaust du dir die mal bitte an und sagst was ich wieder falsch gemacht habe
    ps danke für deine geduld mit mir :)

    <td rowspan="3">
    			<a href="http://acy.ac.ohost.de/cutenews/news.php"><img style="border: 0px solid ; width:"124"; height: "47";" alt="TAG" id="000" src="http://acy.ac.ohost.de/layout/paramore+_05.png" onmouseover='document.getElementById("id="000" " ).src="http://acy.ac.ohost.de/layout/news2.png"' onmouseout='document.getElementById("000" ).src="http://acy.ac.ohost.de/layout/paramore+_05.png"' align="top"/></a>



  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 690

    26.09.2009 um 22:20 Uhr

    <td rowspan="3">
    <a href="http://acy.ac.ohost.de/cutenews/news.php"><img style="border: 0px solid ; width: 124px; height: 47px;" alt="News" id="000" src="http://acy.ac.ohost.de/layout/paramore+_05.png" onmouseover='document.getElementById("000").src="http://acy.ac.ohost.de/layout/news2.png"' onmouseout='document.getElementById("000").src="http://acy.ac.ohost.de/layout/paramore+_05.png"' align="top"/></a>


    So sollte es funktionieren ;)



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 26.09.2009 um 22:21 Uhr ...

[ 1 ] 2 » ... Letzte » Seite 1 von 2


Affiliates:   Pat DG  •   Gallery Yuri  •   Design Grafixx  •   Chibi Graphics  •   Colorful Gfx  •   Blue-Graphics  •   The Seduction  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider