  |
| Autor |
Nachricht |
Windsurfer
Stammuser [User]
Anmeldung: 11.11.06
Beiträge: 31
Wohnort: Zwickau
|
 Verfasst am: 11.11.2006, 11:40 Titel: Frage zu einer bestimmten Verlinkungsart. |
 |
|
Folgendes ich arbeite mit Phase5 vllt kennt das ja jemand.
Ich würde gerne als Startbildschirm für meine neue Website ein Bild einfügen. Es soll wenn man die Seite öffnet schwarz-weiss sein und wenn man mit dem cursor drüber fährt sofort farbig werden und als Link fungieren.
Kann mir da jemand helfen, wie der Html text dafür aussehen muss ???
P.S. Bei Photoshop CS hat man sowas auch über der Werkzeugleiste.Da liegt eine graue Feder wenn man mit der Maus drüber fährt wird die Feder bunt und man kann auf den Link von Photoshop-Online klicken.
|
|
| Nach oben |
|
 |
sejuma
Beliebter [User]
Anmeldung: 08.05.06
Beiträge: 493
|
| Verfasst am: 11.11.2006, 11:58 Titel: |
|
|
Geht z.B. mit CSS.
Sieh dir dazu mal  dieses Beispiel mit dem zugehörigen Quelltext an.
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1644
|
| Verfasst am: 11.11.2006, 12:05 Titel: |
|
|
achte darauf, dass die Dateigröße der Grafik, die beim überfahren mit der Maus angezeigt werden soll, nicht zu groß ist!
Sonst hat ein neuer Besucher nämlich eine ziemlich große Zeitdifferenz zw. überfahren mit der Maus und dem Ändern des Bildes 
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
Windsurfer
Stammuser [User]
Anmeldung: 11.11.06
Beiträge: 31
Wohnort: Zwickau
|
| Verfasst am: 11.11.2006, 12:12 Titel: danke sejuma |
|
|
Aber wo sehe ich denn dann deinen CSS quelltext? Aber genau so habe ich mir das gedacht. thx für die schnelle antwort
achso eins noch das zweite bild dann kann ich doch dann verlinken mit der Startseite oder ???
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1644
|
| Verfasst am: 11.11.2006, 12:25 Titel: |
|
|
klar 
Guck dir auf Sejumas Beispielseite mal den Quelltext an (Rechtsklick auf den weißen Seiten Hintergrund -> Quelltext anzeigen/Seitenquelltext anzeigen/o.ä.).
Im Body findest du dann das hier:
| Code: | | <p id="aendern"><a href="#aendern"><img src="auto_rot.gif" width="200" height="102" alt="blablubb"></a></p> |
Dir fällt villeicht auf, dass dem P-Tag hier eine ID zugwiesen wurde (id="aendern"). Das dort verlinkte Bild ist übrigens dein erstes Bild. Kannst du einfach ersetzen
Außerdem im Link (<a>) für "href" die Seite eingeben, die angezeigt werden soll
Im Header der Datei (<head>) findest du nun die CSS-Eigenschaften, die durch <style type="text/css"> eingeleitet werden.
Darin werden nun die CSS-Attribute beschrieben. Wichtig für dich ist folgendes:
| Code: | #aendern a {
display:block; width: 200px;
background: url(auto_blau.gif) no-repeat; |
in " background: url(auto_blau.gif) no-repeat;" wird das Bild festgelegt, welches beim überfahren mit der Maus angezeigt werden soll. du musst also "auto_blau.gif" durch dein Bild ersetzen (geht auch, wenn's in 'nem Unterordner liegt, z.B. "bilder/bild02.jpg").
Dann sollte es hoffentlich klappen
Chris
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
Windsurfer
Stammuser [User]
Anmeldung: 11.11.06
Beiträge: 31
Wohnort: Zwickau
|
| Verfasst am: 11.11.2006, 13:23 Titel: DANKE |
|
|
hat echt mega gut geklappt.
Aber eine Frage habe ich noch, wie sieht das mit
| Code: | | <center> ... </center> |
aus ??? Ich kann das bild net i ndie Mitte setzen dann geht der komplette Script ned mehr!!!
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1644
|
| Verfasst am: 11.11.2006, 16:07 Titel: |
|
|
stimmt
Erstmal vorweg: Streich <center> umgehend aus deinem Gedächnis - Das ist veraltet und wird nicht mehr verwendet 
Wenn du HTML 4.01 verwendest, sollte es reichen, dem P-Tag doch ein 'align="center"' zu verpassen. Also z.B. so:
| Code: | | <p align="center" id="aendern"> |
MfG,
chris[/code]
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
Windsurfer
Stammuser [User]
Anmeldung: 11.11.06
Beiträge: 31
Wohnort: Zwickau
|
| Verfasst am: 12.11.2006, 11:49 Titel: |
|
|
Danke Chris also Startbild und Verlinkung passt Wunderbar !!!
Nun habe ich auf meiner Willkommensseite die als nächstes folgt, dies hier als Quellcode. Ich nutze übrigend Phase5 falls dir das was sagt !?!
| Code: | <html>
<head>
<title>Willkommen</title>
<meta name="author" content="Raphael">
</head>
<body text="#000000" bgcolor="#CD0101" link="#000000" alink="#000000" vlink="#000000">
<table height="100%" cellpadding="0" border="1" >
<tr>
<td valign="top" width="175" bgcolor="red" >
<!-- Logo -->
<div align="center"><img src="../dat.graf/kreuz_grau.jpg"></div>
<!-- Adresse -->
<!-- Steuerung -->
<br>
<a href="startseite.html"> Startseite </a>
<br>
<a href="willkommen.html"> Termine </a>
<br>
<a href="willkommen.html"> mitspielen? </a>
<br>
<a href="willkommen.html"> Lageplan </a>
<br>
<a href="willkommen.html"> Kontakt </a>
<br>
<a href="willkommen.html"> Impressum </a>
</td>
<td width="1200" >
</td>
</tr>
</table>
</body>
</html> |
So jetzt habe ich mir gedacht das ich das Bild:
| Code: | | <div align="center"><img src="../dat.graf/kreuz_grau.jpg"></div> |
genauso wie auf der Startseite verlinken kann. Sprich wenn ich mit der Maus drauf komme wird es bunt und man kommt immer auf der jewieligen seite zur startseite zurück.
kannst du mir bitte helfen was ich jetzt einfügen müsste ich habe mich schon daran probiert aber es klappt nicht. Bei mir bewegt sich dann imemr nur die grosse Spalte nebenan
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1644
|
| Verfasst am: 12.11.2006, 12:31 Titel: |
|
|
probiers mal so:
zwischen <head> und </head>:
| Code: | <style type="text/css">
<!--
#aendern a {
display: block;
width: Breite_des_Bildes_in_px;
background: url(../dat.graf/kreuz_farbig.jpg) no-repeat;
}
#aendern img {
display:block;
width: Breite_des_Bildes_in_px;
height: Höhe_des_Bildes_in_px;
border:0;
}
#aendern a:hover img {
visibility: hidden;
}
#aendern a:hover {
border:0;
} /* für IE 5.5 und IE 6 */
* html #aendern a {
margin-right:1px;
}
* html #aendern a:hover {
width: Breite_des_Bildes_in_px;
margin-right:0;
} /* für IE 5.01 */
//-->
</style>
|
An der entsprechenden Stelle:
| Code: | | <div align="center"><a id="aendern" href="name_der_startseite.html"><img src="../dat.graf/kreuz_grau.jpg"></div> |
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
Windsurfer
Stammuser [User]
Anmeldung: 11.11.06
Beiträge: 31
Wohnort: Zwickau
|
| Verfasst am: 12.11.2006, 13:07 Titel: |
|
|
Danke aber trotzdem, stellt sich mir die Frage wo soll ich
| Code: | | <div align="center"><a id="aendern" href="name_der_startseite.html"><img src="../dat.graf/kreuz_grau.jpg"></div> |
einfügen ??? Denn der Quellcode oben legt ja das Bild fest was sich aufbaut wenn ich mit der Maus drauf gehe richtig?
_________________
Die ersten Menschen, waren nicht die letzten Affen !!!
|
|
| Nach oben |
|
|
Windsurfer
Stammuser [User]
Anmeldung: 11.11.06
Beiträge: 31
Wohnort: Zwickau
|
| Verfasst am: 12.11.2006, 13:11 Titel: |
|
|
Das ist mein jetziger Html Text
| Code: | html>
<head>
<title>Willkommen</title>
<meta name="author" content="Raphael">
<style type="text/css">
<!--
#aendern a {
display: block;
width:"175";
background: url("../dat.graf/kreuz_grau.jpg") no-repeat;
}
#aendern img {
display:block;
width:"175";
height:"128";
border:0;
}
#aendern a:hover img {
visibility: hidden;
}
#aendern a:hover {
border:0;
} /* für IE 5.5 und IE 6 */
* html #aendern a {
margin-right:1px;
}
* html #aendern a:hover {
width:"175";
margin-right:0;
} /* für IE 5.01 */
//-->
</style>
</head>
<body text="#000000" bgcolor="#CD0101" link="#000000" alink="#000000" vlink="#000000">
<table height="100%" cellpadding="0" border="1" >
<tr>
<td valign="top" width="175" bgcolor="red" >
<!-- Logo -->
<div align="center"><img src="../dat.graf/kreuz_grau.jpg"></div>
<!-- Adresse -->
<!-- Steuerung -->
<br>
<a href="startseite.html"> Startseite </a>
<br>
<a href="willkommen.html"> Termine </a>
<br>
<a href="willkommen.html"> mitspielen? </a>
<br>
<a href="willkommen.html"> Lageplan </a>
<br>
<a href="willkommen.html"> Kontakt </a>
<br>
<a href="willkommen.html"> Impressum </a>
</td>
<td width="1200" >
Herzlich Willkommen bei der JG-Nicolai
</td>
</tr>
</table>
</body>
</html> |
_________________
Die ersten Menschen, waren nicht die letzten Affen !!!
|
|
| Nach oben |
|
|
Windsurfer
Stammuser [User]
Anmeldung: 11.11.06
Beiträge: 31
Wohnort: Zwickau
|
| Verfasst am: 12.11.2006, 15:39 Titel: |
|
|
Alles klar hat sich erledigt !!!
Funzt jetzt mit der Verlinkung, Aber sag mal kann mir jemand Helfen, bei den Buttons ???
Und zwar habe ich wie man oben sieht in dem Quellcode verschiedene Links drinne. Die sollen nun aber als Buttons am Rand erscheinen. ich pack das net ich habe nen schwarzen hintergrund und will jetzt eigentlich orange Buttons haben wo dnan wieder schwarz der Name drinne steht.
_________________
Die ersten Menschen, waren nicht die letzten Affen !!!
|
|
| Nach oben |
|
|
chris1988
Bekannter [User]
Anmeldung: 12.12.05
Beiträge: 1644
|
| Verfasst am: 12.11.2006, 21:03 Titel: |
|
|
mach dafür am besten mal einen neuen Thread auf - das wäre übersichtlicher. Außerdem solltest du dann mal beschreiben, was genau du dir unter so einem Button vorstellst
_________________
Mancher ertrinkt lieber,
als daß er um Hilfe ruft.
(Wilhelm Busch)
|
|
| Nach oben |
|
|
|
|
