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 knnt mir jemand helfen ich hab schon ein tutorial gelesen nur nix kapiert.
    Danke



    Antworten  Antworten Zitat  Zitat
  • 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 mchtest fr 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 verndern (Farbe, Schriftart, fett/kursiv) etc.
    Das speicherst du dann als home_.png, home2.png, home_hover.png etc. ... der Dateiname ist eigentlich egal.

    Dann fgst 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. :>



    Antworten  Antworten Zitat  Zitat
  • 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 einfgen muss danke das du berhaupt geantwortet hast :)



    Antworten  Antworten Zitat  Zitat
  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 688

    25.09.2009 um 17:06 Uhr

    Wie schaut denn dein code aus?



    Antworten  Antworten Zitat  Zitat
  • 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>



    Antworten  Antworten Zitat  Zitat
  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 688

    25.09.2009 um 19:53 Uhr

    Also du musst einfach folgenden validen Mini-Java-Script-Code anstelle deiner verlinkten Bild-Elemente einfgen (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: BILDGSSE; height: BILDHHE;" 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 darber fhrt) 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 ...
    Antworten  Antworten Zitat  Zitat
  • Twilight361User ist offline
    Newbie


    Twilight361

    Registriert: 12.06.2009
    Beitraege: 18

    25.09.2009 um 21:36 Uhr

    was ist die IMAGE_ID??



    Antworten  Antworten Zitat  Zitat
  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 688

    26.09.2009 um 18:57 Uhr

    Das ist einfach eine einmalige Zahl pro Seite/eine Buchstabenkombination - du kannst eigentlich alles nehmen, Leerzeichen o.. wrde ich allerdings vermeiden. Der bersicht halber beginne ich immer mit 000 und hre dann mit 999 auf ;)



    Antworten  Antworten Zitat  Zitat
  • 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 fr 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>



    Antworten  Antworten Zitat  Zitat
  • -Name-User ist offline
    Mod of the night


    -Name-

    Registriert: 19.04.2007
    Beitraege: 688

    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 ...
    Antworten  Antworten Zitat  Zitat

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


Neuste Tutorials

Neuste Forenthemen

Neuste Kommentare

       ALL-INKL.COM - Webhosting Server Hosting Domain Provider