• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Dynamische Button

T

Tytomik

Neues Mitglied
Ich bin dabei eine Webseite zu gestallten, bei der ich Bilder als Button benutze. Es soll ein anderes Bild eingesetzt werden, wenn die Maus über dem Bild ist. Außerdem soll das Bild an einer bestimmten Stelle sein. Jetzt habe ich bisschen gegooglet, ich habe gefunden wie man mit CSS das Bild positionieren kann und das auch prozentual:
Code: 
<html>
<head>
<title> Test </title> 
</head>
<body>
<div id="buttonHome"><img src="Button Home(1normal).png" style="width:100%;height:100%" alt="buttonHome"> </div>

<style type="text/css">
div#buttonHome
{
position:absolute;
top: 100;
left:0.4%;
height:4.888%;
width:6.8125%;
z-index:-1;
margin:0;
padding:0;
}
</style>


</body>
</html>

und jetzt habe ich ein Code gefunden womit ich das Bild ändern kann(ohne CSS), wenn die maus über dem Bild ist:
Code: 
<html>
<head>




<title>Dynamische grafische Buttons</title>
</head>
<script type="text/javascript">


Normal1 = new Image();
Normal1.src = "Button Home(1normal).png"; 
Highlight1 = new Image();
Highlight1.src = "Button Home(2Over).png";












function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}


</script>


<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">


<a href="Test2.htm"
   onmouseover="Bildwechsel(0, Highlight1)"
   onmouseout="Bildwechsel(0, Normal1)"><img src="Button Home(1normal).png" top="300" 
   width="109" height="44" border="0" alt="Home"></a><br>


</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td valign="top">




</td>
</tr>
</table>


</style>
</body>
</html>
</html>

Jetzt würde ich gerne die beiden texte zusammenfügen, weiß aber nicht wie. Ich hoffe ihr versteht mein Problem. Danke!
 
Warum willst du es ohne CSS machen, wenn es mit CSS doch einfacher als in JS ist?


Du erstellst dir einen Button
HTML: 
<button id="click">KlickMich</button>

Gibts diesem ein Hintergrundbild im Normalzustand:
Code: 
#click {background: ur('einbild.png');}

... und einen für Mouseover:
Code: 
#click:hover {background: ur('einanderesbild.png');}
 
Ich verstehe dein Ansatz nicht ganz, ich möchte ja eigentlich kein normalen button haben, sondern ein Bild als button, wie in meinem zweiten Quelltext, ich möchte es sogar mit CSS machen, weil ich das Bild(Button) positionieren möchte.
 
Ich habe das schon verstanden, und natürlich kannst du so etwas auch mit JS lösen. Dachte nur, dass es mit CSS vielleicht für dich einfacher wäre. Im Ergebnis nehmen sich beide Ansätze nichts. Du könntest ebenso den Hover-Effekt über Javascript und die Positionierung in CSS machen.

HTML:
HTML: 
<img id="bild" src="einbild.jpg" alt="ein bild" />

jQuery:
Code: 
$('#bild').hover(
  function() {
    $(this).attr('src', 'einanderesbild.jpg');
  },
  function() {
    $(this).attr('src', 'einbild.jpg');
  }
);
 
Zuletzt bearbeitet:
Wobei hier vanilla JS tatsächlich mal kürzer als jQuery ist:

HTML: 
<img id="bild" src="einbild.png" alt="ein bild" onmouseover="this.src = 'einanderesbild.png'" onmouseout="this.src = 'einbild.png'" />
 
Hängt davon ab, was beim Klick passieren soll. Geht es nur um die Weiterleitung zu einer anderen Seite, reicht ein Anker in HTML.

HTML: 
<a href="#"><img id="bild" src="einbild.png" alt="ein bild" onmouseover="this.src = 'einanderesbild.png'" onmouseout="this.src = 'einbild.png'" /></a>

Ansonsten würde ein weiterer JS Eventhandler benötigt.
 
Wenn das Bild per CSS in keine Maße gezwängt wird, passt es sich selbst an.

Wenn das Bild per CSS in der Breite und/oder Höhe festgesetzt wird, kannst Du die Werte auch per JavaScript anpassen:

Code: 
this.style.width = '90px;
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben