freakyphil1
Neues Mitglied
Ist es in Dreamweaver möglich ein Bild(Bild 1) einzufügen in dem das Rollover Bild (Bild 2) wieder zwei Bilder (Bild 3, Bild 4)mit unterschiedlichen Links etc. hat?
lg Phil
lg Phil
Rollover in Rollover
- Ersteller freakyphil1
- Erstellt am
W
Wustersoss
Guest
Ich denke schon. Du kannst ja auch bei Dreamweaver den Quellcode verändern. Wenn du aber ein Klickbutton suchst das dir das erstellt, das wird es wohl nicht geben. Ich empfehle auch die Webseite nicht in Dreamweaver zu erstellen sondern mit einem normalen Editor wie zum Beispiel PSpad.
W
Wustersoss
Guest
Glaube ich gern. Abitur und Studium helfen hier auch nicht viel weiter, da braucht man etwas bauchgefühl und Fantasie...
freakyphil1
Neues Mitglied
Danke erstmal für die antworten jedoch stehe ich jetzt vor einem anderen Problem..
und zwar hab ich jetzt ein Background Image, darauf ein div-Tag mit Background, darin ein div-Tag mit background, darüber ein Rollover image... jedoch hatte ich eigentlich vorgesehen das ich ein kleineres zu ersetzendes Bild habe und das Rollover image größer, jedoch verkleinert dreamweaver jedesmal das große auf die größe vom kleinen...
Ich will ein kleineren bereich haben wo man draufgeht aber dann ein größeres Bild was sich dann öffnet :/
:(
LG Philipp
und zwar hab ich jetzt ein Background Image, darauf ein div-Tag mit Background, darin ein div-Tag mit background, darüber ein Rollover image... jedoch hatte ich eigentlich vorgesehen das ich ein kleineres zu ersetzendes Bild habe und das Rollover image größer, jedoch verkleinert dreamweaver jedesmal das große auf die größe vom kleinen...
Ich will ein kleineren bereich haben wo man draufgeht aber dann ein größeres Bild was sich dann öffnet :/
:(
LG Philipp
W
Wustersoss
Guest
Jetzt versteh ich nicht was
Vergiss ein mal Dreamweaver für einen Moment, das ist nur ein Hilfsmittel so wie ein Editor ein Hilfsmittel ist um die Seiten zu schreiben. Wichtig ist der Quellcode in HTML und CSS. Denn nur den Quellcode bekommt der Browser übermittelt.
Und vom Quellcode musst du uns was zeigen um zu verstehen was du da machst. Lade die Seite in Firefox. Klicke mit rechts und wähle Quellcode zeigen aus.
Kopiere den ganzen Code und füge ihn hier ein.
bedeuten soll.
Vergiss ein mal Dreamweaver für einen Moment, das ist nur ein Hilfsmittel so wie ein Editor ein Hilfsmittel ist um die Seiten zu schreiben. Wichtig ist der Quellcode in HTML und CSS. Denn nur den Quellcode bekommt der Browser übermittelt.
Und vom Quellcode musst du uns was zeigen um zu verstehen was du da machst. Lade die Seite in Firefox. Klicke mit rechts und wähle Quellcode zeigen aus.
Kopiere den ganzen Code und füge ihn hier ein.
freakyphil1
Neues Mitglied
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body { background-color: #000; background-image: url(http://i.imgur.com/rQs7G.jpg); background-repeat: no-repeat; border-top-color: #FFF; border-right-color: #FFF; border-bottom-color: #FFF; border-left-color: #FFF;}#header_therun { background-image: url(http://i.imgur.com/CWKtG.png); background-repeat: repeat; background-position: center center; height: 85px;}#background2 { width: 480px; margin:0 auto; background-position: center center; background-image: url(http://i.imgur.com/0ckgk.png); height: 800px; background-repeat: no-repeat;}#map_background { background-image: url(http://i.imgur.com/ye1hf.gif); margin:0 auto; height: 266px; width: 472px; background-color: #FFF; background-repeat: no-repeat;}#background2 #map_background a #SanFrancisco { position: absolute; left: 466px; top: 213px; width: 57px; height: 57px;}</style><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></head><body bgcolor="#000000" background="http://i.imgur.com/2xDtS.png" text="#FFFFFF" onload="MM_preloadImages('http://i.imgur.com/2BEJX.gif')"><div id="background2"> <div id="header_therun"> </div> <div id="map_background"> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SanFrancisco','','http://i.imgur.com/2BEJX.gif',1 )"><img src="http://i.imgur.com/eDf5Y.png" alt="San Francisco" name="SanFrancisco" width="80" height="80" border="0" id="SanFrancisco" /></a></div></div></body></html>
W
Wustersoss
Guest
Ich sehe da also 3 Bilder, die alle verlinkt sind auf einen Kostenlosen Bildertauschservice, der das schon mal nicht so lustig findet. Du solltest die Bilder von der Spiele-Webseite herunterladen, die bieten da doch Bilder an.
Da wäre also ein Hintergundbild mit Hubschrauber das horinzontal gestreckt wird. Dann ein Rahmen mit Bildschriftzug Need for Speed. Darin befindet sich oben mittig ein Gif-Bild mit einer Karte der USA. Und wenn man auf der Karte mit der Maus über einen bestimmten Punkt hovered dann färbt sich ein Quadrat in hellblau darauf.
Für 4 Bilder ist das zuviel Code und ich weiss immer noch nicht so recht, was da jetzt dein Problem ist, bzw. was du nun versuchst umzusetzen.
Da wäre also ein Hintergundbild mit Hubschrauber das horinzontal gestreckt wird. Dann ein Rahmen mit Bildschriftzug Need for Speed. Darin befindet sich oben mittig ein Gif-Bild mit einer Karte der USA. Und wenn man auf der Karte mit der Maus über einen bestimmten Punkt hovered dann färbt sich ein Quadrat in hellblau darauf.
Für 4 Bilder ist das zuviel Code und ich weiss immer noch nicht so recht, was da jetzt dein Problem ist, bzw. was du nun versuchst umzusetzen.
freakyphil1
Neues Mitglied
ich will auf dieser "Karte" einen kleinen bereich haben bei dem, wenn man mit dem coursor drüber geht ein größeres bild aufflubbd...
W
Wustersoss
Guest
Du positionierst ein Div über das Kartenbild mit entsprechender Höhe und Weite im CSS-Teil. Du gibst dem Div eine Id, damit du das Div ansprechen kannst.
Im CSS versiehst du das mit dem Pseudoattribut hover. Dem Hover gibts du nun eine Hintergundfarbe, diese kann auch etwas transparent sein, verwende dafür RGBa. In dem Div schreibst du dein Bild rein als IMG-Element. Das IMG-Element bekommt im CSS das Attribut visible:hidden. Im CSS versiehst du dann beim hover noch das IMG mit visible, damit es erscheint. Du musst im CSS dem IMG natürlich auch die Positionen angeben an welcher Stelle es sichtbar sein soll.
Technisch läuft das so ab wie hier zu sehen: Stu Nicholls | CSSplay | Mapping the British Isles bzw
hier:
http://www.cssplay.co.uk/menu/photo_simple.html
Im CSS versiehst du das mit dem Pseudoattribut hover. Dem Hover gibts du nun eine Hintergundfarbe, diese kann auch etwas transparent sein, verwende dafür RGBa. In dem Div schreibst du dein Bild rein als IMG-Element. Das IMG-Element bekommt im CSS das Attribut visible:hidden. Im CSS versiehst du dann beim hover noch das IMG mit visible, damit es erscheint. Du musst im CSS dem IMG natürlich auch die Positionen angeben an welcher Stelle es sichtbar sein soll.
Technisch läuft das so ab wie hier zu sehen: Stu Nicholls | CSSplay | Mapping the British Isles bzw
hier:
http://www.cssplay.co.uk/menu/photo_simple.html
Zuletzt bearbeitet von einem Moderator:
freakyphil1
Neues Mitglied
danke werd ich gleich ausprobieren ... :)
[EDIT]
habs jetzt erstmal extra versucht jedoch ist es mir nicht gelungen :/
was stimmt daran nicht?....
[EDIT]
habs jetzt erstmal extra versucht jedoch ist es mir nicht gelungen :/
was stimmt daran nicht?....
HTML:
<head><style type="text/css">#test { height: 90px; width: 105px;}
a:hover { visibility: visible; background-color: #CCC; overflow: visible;}#test img { visibility:hidden; height: 266px; width: 480px;}</style></head>
<body>
<div id="test"><img name="test" src="http://i.imgur.com/2BEJX.gif" width="480" height="266"/></div>
</body></html>
Zuletzt bearbeitet:
freakyphil1
Neues Mitglied
<head>
<style type="text/css">
#test {
height: 90px; width: 105px;
}
a:hover {
visibility: visible; background-color: #CCC; overflow: visible;
}
#test img {
visibility:hidden; height: 266px; width: 480px;
}
</style>
</head>
<body>
<div id="test"><img name="test" src="http://i.imgur.com/2BEJX.gif" width="480" height="266"/>
</div>
</body>
</html>
<style type="text/css">
#test {
height: 90px; width: 105px;
}
a:hover {
visibility: visible; background-color: #CCC; overflow: visible;
}
#test img {
visibility:hidden; height: 266px; width: 480px;
}
</style>
</head>
<body>
<div id="test"><img name="test" src="http://i.imgur.com/2BEJX.gif" width="480" height="266"/>
</div>
</body>
</html>