Ich Brauche dringend für diese beiden Grafiken
nen code damit wenn mann drüber geht die Zweite Angezeigt wird damit es halt nen schönen Effekt gibt ^^
verwendete ilchClan Version: 1.1
betroffene Homepage: harz-inside.de
Beitrag zur Merkliste hinzufügen
Hier kann eine Notiz zum Merk-Eintrag hinzugefügt werden (optional)
ilch Forum » Allgemein » HTML, PHP, SQL,... » Button Effekte
| Geschlossen | ||
-
Do. 17.07.2008
15:43 Uhr
#1
- Registriert seit
- 06.08.2006
- Beiträge
- 192
- Beitragswertungen
tach,
Ich Brauche dringend für diese beiden Grafiken
nen code damit wenn mann drüber geht die Zweite Angezeigt wird damit es halt nen schönen Effekt gibt ^^
verwendete ilchClan Version: 1.1
betroffene Homepage: harz-inside.de -
CSS und :hover ?Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
-
Do. 17.07.2008
16:03 Uhr
#3
- Registriert seit
- 06.08.2006
- Beiträge
- 192
- Beitragswertungen
öm
sagen wir es mal so ich kenne es so das mann 2 Grfiken halt hatt und wenn mann mit der maus drüber geht leuchtet er auf was aber nicht anderes ist als das er in dem Moment die 2 Grafik Anzeigt ^^
also Hover denke ich mal -
Do. 17.07.2008
16:15 Uhr
#4
- Registriert seit
- 23.04.2006
- Beiträge
- 422
- Beitragswertungen
Kein Support für den Raidplaner über PM. -
Do. 17.07.2008
16:29 Uhr
#5
- Registriert seit
- 06.08.2006
- Beiträge
- 192
- Beitragswertungen
jo Genau das ^^
jetzt muss ich nur gucken wie ich das in der indes schreiben muss!
in die CSS Datei ist klar aber beim bild ist nun die Frage was ich angeben muss fällt mir nämlich gerade net ein
-
Naja kommt halt drauf an was du hast, sollte halt kein Bild sein, da das ja src und kein style mit background-image hat, und dann alt ne id vergeben z.B. id="eindeutig" und dann kannst du mit #eindeutig in der css darauf zugreifen, wenn du es für viele machen willst, z.B. in einem Menü dann mit class="Klasse" und dann .Klasse in der css der rest steht ja eigentlich im geposteten Link.Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
-
Do. 17.07.2008
16:57 Uhr
#7
- Registriert seit
- 06.08.2006
- Beiträge
- 192
- Beitragswertungen
es ist ne Grafik oben drauf!
machen wir es einfacher hier der Code von z.B. vom 1 Butoon:
<td align="center"><img border="0" src="include/designs/Harz-Inside/img/Button-1a.png" width="121" height="34"></td>
-
Wie schon gesagt, mit img gehts nicht, soweit ich weiß, also da nur mit Javascript.
Du kannst aber der td eine id geben id="btn1".
und dann in der style.css halt
#btn1 { background-image:url(img/Button-1a.png); } #btn1:hover { background-image:url(img/Button-1b.png); }
könnte auch sein, dass das nur mit Links geht, dann müsstest du es wohl doch mit JS machen.Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite -
Do. 17.07.2008
23:27 Uhr
#9
- Registriert seit
- 06.08.2006
- Beiträge
- 192
- Beitragswertungen
öm ja hatte jetzt mal das hier Probiert weil es leichter zu verstehn "wahr"
externer Link
so ich habe jetzt da ich nen Drop Down menü dazu nutze es so geschrieben aber es geht net!
<td align="center"><a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '121px')" onMouseout="delayhidemenu()" class="navi-news1"><img border="0" src="include/designs/Harz-Inside/img/Button-1a.png" width="121" height="34"></a></td>
und in einer Extra CSS Datei:
.navi-news1 { background-image:url(img/Button-2a.png); width:121px; height:34px; display:block; } .navi-news:hover, .navi-news:active, .navi-news:focus { background-image:url(img/Button-2b.png); }
zur Erklärung: Button-1a.png
Button-2a.png
Button-2b.png
-
Do. 17.07.2008
23:44 Uhr
#10
- Registriert seit
- 17.12.2007
- Beiträge
- 2.368
- Beitragswertungen
Hast du es schon mal mit einem Rollovereffekt probiert? -
Fr. 18.07.2008
00:09 Uhr
#11
- Registriert seit
- 06.08.2006
- Beiträge
- 192
- Beitragswertungen
bitte was ??? -
Fr. 18.07.2008
09:58 Uhr
#12
- Registriert seit
- 16.06.2006
- Beiträge
- 15.334
- Beitragswertungen
Du hast ja auch immernoch das Bild drin (img) das muss raus, außerdem hast du in der css die 1 bei dem hover Sachen vergessen.Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite -
Fr. 18.07.2008
11:14 Uhr
#13
- Registriert seit
- 17.12.2007
- Beiträge
- 2.368
- Beitragswertungen
Ein Rollovereffekt ist das was du willst, wenn ich soweit richtig verstanden habe... du wilsst ja das wenn man mit der maus auf bild 1 geht sofort bild 2 angezeigt wird und wenn man mit der Maus wieder weg geht, das bild 1 wieder angezeigt wird oder...?
Naja hier ist der Code für den Rollovereffekt
Der Code der in den Headteil der seite kommt:<script type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script>
Der Code für den Button, kommt an die Stelle wo der Button sein soll
<body onLoad="MM_preloadImages('Link zu Bild2')"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','Link zu Bild2',1)"><img src="[b]Link zu Bild1" name="Image1" width="780" height="20" border="0"></a>
mfg -
Fr. 18.07.2008
11:19 Uhr
#14
- Registriert seit
- 25.03.2007
- Beiträge
- 259
- Beitragswertungen
Servus also wenn ich gerade kein fehler gemacht hate sollte das ungefähr so funktionieren.
<style> <!-- a.navi-news1 { display:block; color: #3EA8CA; background:#151515 url('images/button.png') ; width: 180px; height: 20px; text-decoration: none; } a.navi-news1:hover { display:block; color: #3EA8CA; background:#ffffff url('images/button_hover.png') ; width: 180px; height: 20px; text-decoration: none; } --> </style> <a onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '121px')" onMouseout="delayhidemenu()" class="navi-news1">Dein Text</a>
im Style sind natürlich der pfad zu deinem Bild und andere Größen einzustellen.
MfG
Stefan
Zuletzt modifiziert von SteKu am 18.07.2008 - 11:20:34Wer Rechtschreibfehler findet darf sie behalten. -
Fr. 18.07.2008
13:20 Uhr
#15
- Registriert seit
- 06.08.2006
- Beiträge
- 192
- Beitragswertungen
@all Ich werde mal eure Code´s Ausprobieren ^^ THX
@Ahrta5
Du hast den anderen code aber wieder rausgenommen das ist doof den der wahr bis auf class nicht für den effeckt sondern für das Dorp Down!
@SteKu
k ich guck nochmal Danke
Edit: So es Funktionier aber der Schwartze Hintergrund ist nen Problem *siehe HP*
@Mairu
öm UPS ^^ wahr voll gestern mit meiner Migrände net so aufnahmefähig XD
Zuletzt modifiziert von Mcsaxo1990 am 18.07.2008 - 13:26:52 -
Fr. 18.07.2008
14:13 Uhr
#16
- Registriert seit
- 05.11.2007
- Beiträge
- 173
- Beitragswertungen
Zitat geschrieben von Mcsaxo1990
Das schwarze an den ecken kommt glaube ich einfach daher, dass der hintergrund des ersten Bildes nicht Transparent ist?! -
Fr. 18.07.2008
14:23 Uhr
#17
- Registriert seit
- 06.08.2006
- Beiträge
- 192
- Beitragswertungen
??? lol
guck doch mal oben da ist die Grafik Gepostet und das ist alle Transperent!?
Edit habe gerade Festgestellt das das andere also wenn mann drüber geht weiß ist sieht mann nur nicht so! -.-
Zuletzt modifiziert von Mcsaxo1990 am 18.07.2008 - 15:02:34 -
Fr. 18.07.2008
15:13 Uhr
#18
- Registriert seit
- 17.12.2007
- Beiträge
- 2.368
- Beitragswertungen
lol? welchen Code meinst du denn? der Link wo der Button hinführen soll? -
Fr. 18.07.2008
15:28 Uhr
#19
- Registriert seit
- 06.08.2006
- Beiträge
- 192
- Beitragswertungen
a.navi-news1 { display:block; color: #3EA8CA; background:#151515 url('img/Button-2a.png') ; width: 121px; height: 34px; text-decoration: none; } a.navi-news1:hover { display:block; color: #3EA8CA; background:#ffffff url('img/Button-2b.png') ; width: 121x; height: 34px; text-decoration: none; }
also so wie es aussieht liegt das an de Farb angaben vor dem Bild -.-
Edit:
So jetzt geht esa.navi-news1 { display:block; color: #3EA8CA; background:url('img/Button-2a.png') ; width: 121px; height: 34px; text-decoration: none; } a.navi-news1:hover { display:block; color: #3EA8CA; background:url('img/Button-2b.png') ; width: 121x; height: 34px; text-decoration: none; }
Zuletzt modifiziert von Mcsaxo1990 am 18.07.2008 - 15:34:11
| Geschlossen | ||
 |
Zurück zu HTML, PHP, SQL,... | |
Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten