Dynamische grafische Buttons

Octoputer · 29. Okt. 2010

Hallo,

ich möchte gern, wie der Titel sagt dynamische Buttons einbinden und bin dabei genau nach diesem http://de.selfhtml.org/javascript/beispiele/buttons.htm Beispiel vorgegangen.

Es funzt allerdings nicht. Ich hatte die Vermutung, dass das Ganze mit CSS Konflikte bereitet. Hab´s deaktiviert, aber auch dann tat sich nichts.

Woran könnte es liegen.

Arcsinh · 29. Okt. 2010

Das ist reine CSS-Sache. Bei einem hover teilst du dem Element ein neues background-image zu.

dkdenz · 29. Okt. 2010

dkdenz' CSS-Spielwiese

Octoputer · 29. Okt. 2010

Danke für die schnelle Antwort. Wenn du mir jetzt noch sagen könntest wohin der 2. Block kommt, wäre das göttlich. Hab ihn momentan in den Head ins <style type="text/css"> getackert. Da klappts schon mal nicht. Das .gif was wechseln soll liegt in einer div. Hats damit zu tun?!?

dkdenz · 29. Okt. 2010

Zeig mal was Du gemacht hast...

miniA4kuser · 30. Okt. 2010

Octoputer schrieb:
Wenn du mir jetzt noch sagen könntest wohin der 2. Block kommt, wäre das göttlich.

Ohne deinen Code zu kenne etwas schwierig, findest du nicht auch?

Octoputer · 02. Nov. 2010

Hab´s schon wieder rausgenommen.

So hat´s auf jedenfall ausgesehen:

.hover:link, a.hover:visited, a.hover:hover, a.hover:active {
display:block;
width:84px;
height:30px;
background:url(pfad/zum/bild.jpg);
}
a.hover:hover {
background:url(pfad/zum/bild.jpg) 0px 30px;
}

Hab diesen Block in den HEAD u meinen CSS Klamotten gepackt und das hier....

<a href="index.html" class="hover"></a>

.............in die .div auf der mein Button liegt.

Natürlich mit den entsprechenden Werten.

Nur das wird´s wohl nicht gewesen sein! Könnte mir jemand nur ganz kurz erklären wo der Fehler ist.

miniA4kuser · 02. Nov. 2010

Das kann auch nicht funktionieren! Das CSS ist nicht komplett.
Und ich glaube nicht das dein .gif "bild.jpg" heißt und in dem Verzeichnis "zum" liegt, welches wiederum im Verzeichnis "pfad" liegt.

Deswegen nocheinmal meine Frage: Ohne deinen Code zu kenne etwas schwierig, findest du nicht auch?

Octoputer · 03. Nov. 2010

Ich kopiere es nochmal neu rein und poste es dann.

Natürlich haben meine Bilder Namen und Pfade. Hab´s nur aus dem Beispiel kopiert, weil ich es schon wieder verworfen hatte und an was Neuem dran war.

Momentchen

Octoputer · 03. Nov. 2010

Okay, hier ist der Teil der im <head></head> steht.........

<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);
}
a.hover:hover {
background:url(bilder/startseite.gif) 150px 20px;
}

</style>

Und hier der Verweis im Bild........



<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"><img src="bilder/startseite.gif" alt=""
border="0" width="150" height="20"></a>

</div>

Alternativ dazu würde mich sowas hier http://forum.jswelt.de/javascript/52636-navigation-schein.html interessieren. Was wahrscheinlich nen Tacken komplizierter ist.

Bin für jede Hilfe dankbar.

miniA4kuser · 03. Nov. 2010

Bitte CODE Tags verwenden.

So wie du das anstellst kann das nicht funktionieren. Wenn du über dein Hintergrundbild eine andere Grafik legst, dann kannst du das Hintergrundbild so oft ändern wie du willst, aber du wirst keine Änderung sehen, da sich eben alles im Hintergrund abspielt:

Code:

<a href="index.html" class="hover">[COLOR="Red"]<img src="bilder/startseite.gif" alt="" border="0" width="150" height="20">[/COLOR]</a>

Welcher Pfad ist denn nun der richtige?

Code:

background:url([COLOR="Red"]/bilder[/COLOR]/startseite.gif);
oder
background:url([COLOR="Red"]bilder[/COLOR]/startseite.gif) 150px 20px;

Octoputer · 03. Nov. 2010

Das sich dahinter was abspielt seh ich ja, aber die Hintergrundgrafik soll ja beim mouseover über die Standardgrafik kommen.

miniA4kuser · 03. Nov. 2010

Octoputer schrieb:
Das sich dahinter was abspielt seh ich ja,

Das glaube ich nicht!

Du verstehst oder willst nicht verstehen was ich geschrieben habe?

miniA4kuser schrieb:
So wie du das anstellst kann das nicht funktionieren. Wenn du über dein Hintergrundbild eine andere Grafik legst, dann kannst du das Hintergrundbild so oft ändern wie du willst, aber du wirst keine Änderung sehen, da sich eben alles im Hintergrund abspielt:

Code:

<a href="index.html" class="hover">[COLOR="Red"]<img src="bilder/startseite.gif" alt="" border="0" width="150" height="20">[/COLOR]</a>

Um es nocheinmal bildlich darzustellen:
1. Du schaltest deinen Monitor ein.
2. Du legst ein schwarzes, undurchsichtiges Tuch über den Monitor, welches diesen komplett verdeckt.
3. Du schaltest deinen Computer ein, damit dieser hochfährt.
4. Auch nach 5 Minuten starrst du auf den Monitor und meckerst darüber das nichts passiert und du nichts außer "schwarz" siehst.

Abhilfe:
Entferne das schwarze, undurchlässige Tuch, dann siehst du auch was passiert, sprich wie sich die Anzeige auf deinem Monitor ändert.

kkapsner · 03. Nov. 2010

dkdenz · 03. Nov. 2010

Ich dachte, ich hätte dies Beispiel verständlich erklärt.
Scheint aber nur bei Leuten zu fruchten, die auch die Grundlagen beherrschen.
Du hast elementäre Grundlagendefizite, sorry.
Ich sehe z. B., daß Du bei den Positionsangaben die Werte für die Bildgröße angibst (ganz abgesehen von der Grafik im Link).
Und so weiter...
Wenn Du Dich nicht einarbeitest, wird das nix.

Octoputer · 05. Nov. 2010

Hier erst mal der Link zur Seite http://marc-reimann.de/.

Wenn ich bspw. über den Startbutton fahre, sehe ich ja das sich im Hintergrund auf der Ebene was tut. Da der Button ja ein .gif ist und der Hintergrund transparent ist, ändern sich die vier Ecken beim rüberfahren. Also scheint der mouseover auf jedenfall zu funktionieren. Nur warum im Hintergrund, und warum existieren diese Ecken überhaupt, wenn das "Highlight-gif" von der Form her mit dem Standard-Button identisch ist?

Vielleicht könnte sich ja doch jemand auf mein Niveau herablassen, und mir bei meinem trivialen Problem helfen.
Wäre nicht schlecht wenn ein Forum seinen Zweck erfüllen würde.

Danke schomma

Ps: Bei der online-Variante ist der Code natürlich noch der Alte. Hab den Link nur zu Veranschaulichung gepostet.

dkdenz · 05. Nov. 2010

Sorry, aber ich sehe weder mit Gecko noch mit Webkit irgendeinen Hovereffekt...

Octoputer · 05. Nov. 2010

Hab doch gesagt, dass ich den alten Code oben habe. Nur wenn ich es so mache wie in dem Code, den ich geposted habe sieht man eine Aktivität. Nur halt im Hintergrund an den 4 abgerundeten Ecken sichtbar.

miniA4kuser · 05. Nov. 2010

Octoputer schrieb:
Hab doch gesagt, dass ich den alten Code oben habe. Nur wenn ich es so mache wie in dem Code, den ich geposted habe sieht man eine Aktivität. Nur halt im Hintergrund an den 4 abgerundeten Ecken sichtbar.

Das glaube ich ja jetzt nicht! Wie soll man bei deinem Problem behilflich sein, wenn du nicht einmal so fair bist und den Problemcode zugänglich machst?
Du sprichst immer nur in theoretischen Beispielen ohne wirklich Fakten zu liefern und beachtest irgendwie nicht was ich dir schon die ganze Zeit versuche hier begreiflich zu machen.

Und zu deinem Spruch: "Wäre nicht schlecht wenn ein Forum seinen Zweck erfüllen würde."
kann ich nur sagen: Wäre nicht schlecht wenn der Fragende den Anforderungen zur Lösungsfindung nachkommen würde.

Octoputer · 05. Nov. 2010

PHP:

<!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/startseitehigh.gif) 150px 20px;
  }
a.hover:hover {
  background:url(bilder/startseitehigh.gif) 150px 20px;
  }

</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"><img src="bilder/startseitehigh.gif" alt="" 
                    border="0" width="150" height="20"></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>

So, hier der komplette Code.

Dynamische grafische Buttons

New member

Lounge-Member

New member

New member

New member

Lounge-Member

New member

Lounge-Member

New member

New member

Lounge-Member

New member

Lounge-Member

Super Moderator

New member

New member

New member

New member

Lounge-Member

New member