|
 |
  |
| Autor |
Nachricht |
candysmile
Neuer [User]
Anmeldung: 20.09.05
Beiträge: 3
|
 Verfasst am: 20.09.2005, 11:39 Titel: Rollover (Text zum Bild) |
 |
|
Wie kann ich einen Rollover von Text zum Bild erstellen?
Ich habe also einen verlinkten Text, wenn ich mit der Maus darüber fahre,
soll ein Bild erscheinen (der Text also durch das Bild ausgetauscht werden).
Kann mir jemand helfen?
Vielen Dank im Voraus!
|
|
| Nach oben |
|
 |
dein_opi
Beliebter [User]
Anmeldung: 07.11.04
Beiträge: 417
Wohnort: Göttingen
|
| Verfasst am: 20.09.2005, 11:48 Titel: |
|
|
also text komplett gegen bild auszutauschen: k.a.
du kannst aber über css sagen das a:hover als hintergrund ein bild bekommen soll
_________________
 News Script Rezepte CMS Counter
|
|
| Nach oben |
|
|
candysmile
Neuer [User]
Anmeldung: 20.09.05
Beiträge: 3
|
| Verfasst am: 20.09.2005, 11:53 Titel: |
|
|
ok, danke.
teste ich gleich mal aus...
|
|
| Nach oben |
|
|
candysmile
Neuer [User]
Anmeldung: 20.09.05
Beiträge: 3
|
| Verfasst am: 20.09.2005, 12:11 Titel: |
|
|
hmmm.
das klappt bei mir nicht...
eine andere Lsg. wird es da wohl nicht geben?!?
|
|
| Nach oben |
|
|
Matze
Beliebter [User]
Anmeldung: 19.07.05
Beiträge: 328
Wohnort: Fortaleza/ ...
|
| Verfasst am: 20.09.2005, 14:26 Titel: |
|
|
doch es geht anders mit JavaScript....
Ich erkläre es am besten mal mit einem fallbeispiel da es mit da etwas einfacher vorkommt das zu verstehen!
Ich kann aber nicht versprechen das es so 100% funktioniert!
Beispiel abgeleitet von: http://de.selfhtml.org
Vorab:Also du brauchst 2 Grafiken, erst eine leere transparente GIF Datei!(Sehr klein am besten so ca. 1x1 Pixel oda so....) und dann natürlich auch noch die Datei die du einblenden willst! Aber denke dran,... nicht jeder hat DSL also Auflösung usw. runterdrehen!
Natürlich müssen die Bilder die du einblenden willst nicht in gif sein! Aber das leere muss in GIF sein!
<html>
<head>
<title>Deine Titel</title>
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "leer.gif"; /* Die Leere Grafik! */
Highlight1 = new Image();
Highlight1.src = "bild001.gif"; /* erste Grafik */
Normal2 = new Image();
Normal1.src = "leer.gif"; /* Die Leere Grafik! */
Highlight2 = new Image();
Highlight2.src = "bild002.gif"; /* zweite Grafik */
Normal3 = new Image();
Normal1.src = "leer.gif"; /* Die Leere Grafik! */
Highlight3 = new Image();
Highlight3.src = "bild003.gif"; /* dritte Grafik */
/* usw. fuer alle weiteren zu benutzenden Grafiken */
function Bildwechsel (Bildnr, Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<style type="text/css"> /* Hier deine CSS Defenieren wenn du willst*/
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p { color:#000000; font-family:Arial,sans-serif; }
</style>
</head>
<body bgcolor="#FFFFC0"> /* Hier deine Body Defenieren wenn du willst*/
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">
<a href="#"
onMouseOver="Bildwechsel(0, Highlight1)"
onMouseOut="Bildwechsel(0, Normal1)"><img src="button1.gif"
width="130" height="30" border="0" alt="HIER DEINEN TEXT EINFÜGEN!"></a><br>
</td><td> </td>
<td valign="top">
<p><b>Fahren Sie mit der Maus über die Buttons. Sie dürfen auch draufdrücken  </b></p>
</td>
</tr>
</table>
</body>
</html>
Ich hoffe das es so klappt,.. wenn nicht lass die Datei bitte Up und schick mir den Link!
Liebe Grüsse aus Brasilien
Matze
|
|
| Nach oben |
|
|
Matze
Beliebter [User]
Anmeldung: 19.07.05
Beiträge: 328
Wohnort: Fortaleza/ ...
|
| Verfasst am: 22.09.2005, 18:09 Titel: |
|
|
so geht es natürlich nicht....!!
Ich hab mir das ganze nochma gestern in meiner Hängematte durch den Kopf gehen lassen und ich habe einen anderen Vorschlag für dich der an ndas oben anlehnt...leider auch etrwas Traffic reicher...
Mach es folgender Massen
statt dem leer.gif machte nen Bild mit dem Text den du hast und stezt den da rein reduzierst die Datei grösse auf so ca. 100kb (MAX!) und machst dann die Datei da oben rein musst nur halt dran denken es gibt user die JavaScript deakteviert haben!!
Grüsse aus Brasilien!!
Matze
|
|
| Nach oben |
|
|
Chrigu
Beliebter [User]
Anmeldung: 12.08.05
Beiträge: 346
Wohnort: CH - 4522 ...
|
| Verfasst am: 23.09.2005, 08:59 Titel: |
|
|
Meine Lösung:
[code]<script language="JavaScript" 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>[/quote]
..... kommt in den header
[code]<body onLoad="MM_preloadImages('file:///D|/TRIPLE-X-HOSTING/T-CLIENTS/VERBRAUCHERFORUM/banner/apug.gif')">
<a href="falls%20gew%FCnscht,%20URL%20angeben" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','file:///D|/TRIPLE-X-HOSTING/T-CLIENTS/VERBRAUCHERFORUM/banner/apug.gif',1)"> [/code]
..kommt in den Body
Ob Du nun eine 1Pixelgrafik nimmst oder den Text in ein Bild einbindest, ist Dir überlassen. beides hat Vor- und Nachteile. Der grösste Nachteil bei beiden Varianten ist die Darstellung, die leidet am meisten darunter.
_________________
Das Verzeichnis mit Anspruch
Das Verzeichnis für Verzeichnisse - > 12500 unique visits p.M.!
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
