Dynamische grafische Buttons
- Ersteller Octoputer
- Erstellt am
dkdenz
New member
PHP:
a.hover:link, a.hover:visited, a.hover:hover, a.hover:active {
display:block;
width:150px;
height:20px;
background:url(/bilder/startseitehigh.gif) 150px 20px;
}
a.hover:hover {
background:url(bilder/startseitehigh.gif) 150px 20px;
}...deswegen nochmals mein Statement: Grundlagen...
HTML:
a.hover:link, a.hover:visited, a.hover:hover, a.hover:active {
display:block;
width:150px;
height:20px;
background:url(bilder/startseite.gif) ;
}
a.hover:hover {
background:url(bilder/startseitehigh.gif) ;
}
</style>Ups, die Bilder waren identisch. So wie oben gehts, allerdings hat das gif nicht mehr die richtige Größe!
miniA4kuser
Lounge-Member
Das Bild startseitehigh.gif befindet sich aber nicht auf deinem Webserver!
Was für einen Effekt willst du denn erziehlen?
Was für einen Effekt willst du denn erziehlen?
Das ist richtig. Der Effekt ist, das sich die Oberfläche des Buttons ändern soll. Es geht jetzt auch, nur das Bild wird nicht in der richtigen Größe dargestellt. Seltsam. Man sieht nur einen Ausschnitt stark vergrößert. Halt nicht in 150px*20px.
Wahrscheinlich irgendein selten dusseliger Fehler.
Wahrscheinlich irgendein selten dusseliger Fehler.
miniA4kuser
Lounge-Member
Deine Angabe von 150px*20px gibt nicht die Größe an, sondern wo die linke obere Ecke der Hintergrundgrafik sein soll, siehe Selfhtml...background-position (Hintergrundposition).
Trotzdem ist mir nicht ganz klar was du eigentlich erziehlen willst. Illustriere das doch einmal in Form eines Bildes, wie es aussehen soll, und poste es mal hier.
Trotzdem ist mir nicht ganz klar was du eigentlich erziehlen willst. Illustriere das doch einmal in Form eines Bildes, wie es aussehen soll, und poste es mal hier.
Hier nochmal die komplette Version mit Funktion des Buttons(Farbwechsel), allerdings wird der Button, nicht korrekt dargestellt.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>MarcReimann</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">
<link href="CssClasses.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:link { text-decoration:none; font-weight:bold; font-style:italic; color:#000000;}
a:visited { text-decoration:none; font-weight:normal; font-style:italic; color:#000000;}
a:hover { text-decoration:none; font-weight:bold; font-style:italic; color:#9ACD32;}
a:active { text-decoration:none; font-weight:normal; font-style:italic; color:#000000;}
a:focus { text-decoration:none; font-weight:normal; font-style:italic; color:#000000;}
a.hover:link, a.hover:visited, a.hover:hover, a.hover:active {
display:block;
width:150px;
height:20px;
background:url(bilder/startseite.gif);
background-position:center;
}
a.hover:hover {
background:url(bilder/startseitehigh.gif);
background-position:center;
}
</style>
<meta name="description" content="Bewerbung">
<meta name="author" content="Marc Reimann">
<meta name="editor" content="html-editor phase 5">
<meta name="robots" content="follow">
<meta name="keywords" content="Praktikum, ADN, Advanced, Digital, Network, Distribution, Bochum-Wattenscheid, Marc-Reimann, marc-reimann,Marc, Reimann, IHK, IT, Berufsförderungswerk, IT-Systemkaufmann, Systemkaufmann, Praktikum, Praktikumsstelle, Bewerbung, Netzwerktechnik, Software, Arbeitsplatz, Bochum, Dortmund, Ausbildung, Softwarelösungen">
</head>
<body text="#000000" bgcolor=#282C2B link="#FF0000" alink="#FF0000"
vlink="#FF0000">
<!--Piwik-->
<div id="e0" style="position:absolute;
left:112px;top:40px;
width:1040px;
height:565px;z-index:1;
background-color:#ffffff;
visibility:hidden;">
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://marc-reimann.de/piwik/" : "http://marc-reimann.de/piwik/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://marc-reimann.de/piwik/piwik.php?idsite=1" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tag -->
</div>
<!--Hintergrundebene-->
<div id="e1" style="position:absolute;
left:112px;top:40px;
width:1040px;
height:565px;z-index:5;
background-color:#ffffff;
visibility:visible;">
</div>
<!--Header-->
<div id="e2" style="position:absolute;
left:132px;top:60px;
width:1000px;
height:200px;z-index:10;
background-image:URL(bilder/Header_neu.jpg);
visibility:visible;">
</div>
<!--Leerbutton-->
<div id="e3" style="position:absolute;
left:147px;top:192px;
width:110px;
height:20px;z-index:15;
visibility:visible;">
<img src="bilder/buttonleer.gif" alt=""
border="0" width="110" height="20">
</div>
<!--Startbutton-->
<div id="e4" style="position:absolute;
left:257px;top:192px;
width:150px;
height:20px;z-index:20;
visibility:visible;">
<a href="index.html" class="hover"></a>
</div>
<!--Werdegangbutton-->
<div id="e5" style="position:absolute;
left:407px;top:192px;
width:150px;
height:20px;z-index:25;
visibility:visible;">
<a href="werdegang.html"><img src="bilder/werdegang.gif" alt=""
border="0" width="150" height="20"></a>
</div>
<!--Hardskills/Softskills-->
<div id="e6" style="position:absolute;
left:557px;top:192px;
width:150px;
height:20px;z-index:30;
visibility:visible;">
<a href="skills.html"><img src="bilder/Skills.gif" alt=""
border="0" width="150" height="20"></a>
</div>
<!--Kontaktbutton-->
<div id="e7" style="position:absolute;
left:707px;top:192px;
width:150px;
height:20px;z-index:35;
visibility:visible;">
<a href="kontakt.php"><img src="bilder/Kontakt.gif" alt=""
border="0" width="150" height="20"></a>
</div>
<!--Impressumbutton-->
<div id="e8" style="position:absolute;
left:856px;top:192px;
width:150px;
height:20px;z-index:40;
visibility:visible;">
<a href="impressum.html"><img src="bilder/Impressum.gif" alt=""
border="0" width="150" height="20"></a>
</div>
<!--Leerbutton-->
<div id="e9" style="position:absolute;
left:1006px;top:192px;
width:110px;
height:20px;z-index:45;
visibility:visible;">
<img src="bilder/buttonleer.gif" alt=""
border="0" width="110" height="20">
<!--Bookmarks-->
</div>
<div id="e9b" style="position:absolute;
left:1096px;top:260px;
width:110px;
height:18px;z-index:56;
visibility:visible;">
<a href="http://www.facebook.com/"><img src="bilder/book_fb.jpg" alt=""
border="0" width="16" height="18">
<a href="http://www.xing.com/"><img src="bilder/book_xing.jpg" alt=""
border="0" width="16" height="18">
</div>
<!--foto-->
<div id="e10" style="position:absolute;
left:132px;top:260px;
width:217px;
height:325px;z-index:50;
visibility:visible;
background-image:URL(bilder/photo.jpg);">
</div>
<!--Inhalt-->
<div id="e11" style="position:absolute;
left:349px;top:260px;
width:783px;
height:325px;z-index:55;
background-color:#ffffff;
visibility:visible;">
<table border="0" cellpadding="4" width="100%">
<tr >
<td class="ueberschrift1" colspan="2" height="70">Herzlich Willkommen<br> auf meiner Bewerbungshomepage!</td>
</tr>
<tr >
<td class="normal">Mein Name ist Marc Reimann und es freut mich sehr, dass Ihr Interesse geweckt ist.....<br>
Diese Seiten werden gerade grundlegend umstrukturiert.<br>Vom 04.10.2010-03.01.2011 bin ich im Praktikum
bei der <a href="http://www.adn.de"><font color="cc0000">Advanced Digital Network Distribution</font></a> in Bochum-Wattenscheid.<br>
</td>
</tr>
<tr >
<td class="normal">Meine Ausbildung zum IT-Systemkaufmann,
die ich mit der IHK-Prüfung im Sommer 2011 erfolgreich abschließen werde, absolviere ich am <a href="http://www.bfw-do.de/"><font color="0000ff">BFW Dortmund</font></a>. <br><br>
Um mich als zukünftigen Mitarbeiter besser kennenzulernen,
finden Sie auf meinen Seiten Interessantes zu meiner
bisherigen Ausbildung, und natürlich zu meiner Person.<br><br><br>
</td>
</tr>
<tr>
<td class="tabelle1">Bei Fragen nutzen Sie bitte das Kontaktformular.<br>Selbstverständlich stehe ich Ihnen
gern persönlich zur Verfügung.
</td>
</tr>
</table>
</div>
</body>
</html>
kkapsner
Super Moderator
miniA4kuser
Lounge-Member
Das das Bild "startseitehigh.gif" NICHT auf dem Webserver vorhanden ist hatte ich auch schon einmal geschrieben, aber Octoputer versteht nicht (oder will nicht verstehen) was ihm geschrieben wird. Ich hatte z.B. nicht nach der kompletten Version gefragt, sondern das hier:
Octoputer: Warum machst du nicht das was man dir sagt? Wenn du nicht die Informationen lieferst nach denen du gefragt wirst kann dir nicht geholfen werden!
Octoputer: Warum machst du nicht das was man dir sagt? Wenn du nicht die Informationen lieferst nach denen du gefragt wirst kann dir nicht geholfen werden!
@miniA4kuser
Ich glaub es hackt.
Wenn ich schreibe, dass der Button "startseitehigh.gif" noch nicht hochgeladen ist dann ist dem so. Und ich werde bestimmt keinen fehlerhaften Quellcode online stellen. Daher wird´s erst lokal getestet.
Und wenn mir hier nach dem Posten meines kompletten Quelltextes nicht geholfen werden kann, dann bin ich hier in der Tat falsch.
Unglaublich dass Leute Hilfestellung anbieten und anstatt sie dann auch zu leisten nur dumme und arrogante Sprüche rauslassen.
Echt der Hammer.
Top Forum. Weiter so.
Ich glaub es hackt.
Wenn ich schreibe, dass der Button "startseitehigh.gif" noch nicht hochgeladen ist dann ist dem so. Und ich werde bestimmt keinen fehlerhaften Quellcode online stellen. Daher wird´s erst lokal getestet.
Und wenn mir hier nach dem Posten meines kompletten Quelltextes nicht geholfen werden kann, dann bin ich hier in der Tat falsch.
Unglaublich dass Leute Hilfestellung anbieten und anstatt sie dann auch zu leisten nur dumme und arrogante Sprüche rauslassen.
Echt der Hammer.
Top Forum. Weiter so.
miniA4kuser
Lounge-Member
Lieber Octoputer, was soll ich darauf sagen?
Was für einen Unterschied macht es für deine momentane Webseite, ob das Bild "startseitehigh.gif" auf deinem Server (im Verzeichnis Bilder) abgelegt ist oder nicht? Richtig, kenien. Aber wir, als Leute welche eine Hilfestellung anbieten könnten, wäre es durchaus sehr vorteilhaft, wenn das Bild "startseitehigh.gif" auf deinem Server liegen würde. So könnten wir uns diese anschauen und hätten einen echten visuellen Eindruck davon, was dieses ominöse Bild namens "startseitehigh.gif" für eine Aufgabe/Funktionsweise hat. Des weiteren könntest du auch einfach das Bild "startseitehigh.gif" auch als Anhang zu deiner Nachricht geben, dann musst du es auch nicht auf deinen Webserver ablegen.
Habe ich irgendwo geschrieben, das du fehlerhaften Quellcode online stellen sollst? Richtig, nein. Nicht das es möglich wäre dies zu tun und das ohne deinen momentanen Webauftritt zu beeinflussen/beeinträchtigen! Du könntest ein Minibeispiel (nur Navigatiion) erstellen und dieses auf deinem Webserver unter der Adresse "deine seite im www/TEST/Navitest.html" (oder ähnlich) ablegen. So können wir, als Leute welche eine Hilfestellung anbieten könnten uns deinen Versuch in echt ansehen und beurteilen. Oder bist du der festen Überzeugung dass das deinen Webauftritt negativ beeinflusst/beeinträchtigt?
Warum hast du denn, wie von mir mehrfach vorgeschlagen, nicht ein Bild/ eine Grafik erstell, wo jeder sehen kann wie dein dynamischer Button im original aussieht und im Vergleich dazu wenn die Maus über eben diesen dynamischen Button fährt?
Zum Schluß noch eine letzte Frage:
Wenn du wirklich der Meinung bist, das ich anstatt helfen zu wollen nur dumme und arogante Sprüche rausgelassen habe, so beantworte mir dies: Warum hast du lieber eine Nachricht erfasst, in der du dich versuchst herauszureden und Leute sowie auch das gesamte Forum angreifst, anstatt wie von mir gewünscht ein Bild zu erstellen und als Anhang zu deiner Nachricht zu geben?
Oder um die eben genannte Frage kurz und knapp zu halten: Warum machst du (schon wieder) nicht das was man dir sagt?
So soll er beim mouseover aussehen,
http://marc-reimann.de/bilder/startseitehigh.gif
.....und so standardmäßig:
http://marc-reimann.de/bilder/startseite.gif
http://marc-reimann.de/bilder/startseitehigh.gif
.....und so standardmäßig:
http://marc-reimann.de/bilder/startseite.gif
Arcsinh
Lounge-Member
Soll das jetzt ein Scherz sein?
Wie es mit zwei geht, steht doch in dem Link, den du in deinem ersten Beitrag hattest.
Und wie es mit einer geht, steht auf dkdenz' Seite...
miniA4kuser
Lounge-Member
Grundlagenbeschreibung:
Ein Hintergrundbild kannst du nur angeben aber nicht skalieren, d.h. du kannst keine Größenangaben machen wie bei dem img-Tag. Folglich musst du deine Navigationsbilder in deiner Wunschgröße (bei dir 150 x 20) abspeichern, bzw. deine Grenzbilder in 110 x 20 (buttonleer.gif).
Danach musst du deinen HTML code so wie schon mehrfach beschrieben aufräumen, d.h. alle img-Tags aus den a-tags entfernen usw.
Das würde dann z.B. so aussehen (Nur Navigation von deiner Seite):
Ein Hintergrundbild kannst du nur angeben aber nicht skalieren, d.h. du kannst keine Größenangaben machen wie bei dem img-Tag. Folglich musst du deine Navigationsbilder in deiner Wunschgröße (bei dir 150 x 20) abspeichern, bzw. deine Grenzbilder in 110 x 20 (buttonleer.gif).
Danach musst du deinen HTML code so wie schon mehrfach beschrieben aufräumen, d.h. alle img-Tags aus den a-tags entfernen usw.
Das würde dann z.B. so aussehen (Nur Navigation von deiner Seite):
miniA4kuser
Lounge-Member
Gern geschehen.