klick auf Button, Bild aufploppen

Painsucker

Hallo ich habe einen Button der wenn man mit der Mouse drüber fährt den style ändert. wie bekomme ich es hin das wenn ich auf den button klicke sich ein bild auf der selben seite öffnet.

hier mein button

HTML

<div style="margin:-540px 335px;"> 
 <style>
   a       { display:block;
             background-image:url(button1.jpg);
             width:116px; height:27px }
   a:hover { background-image:url(button2.gif); }
 </style>
</div>

es soll dann ungefähr so funktionieren
[Blockierte Grafik: http://i41.tinypic.com/x5446a.jpg]

Dodo

Du kannst mittels JavaScript die style-Variable jedes Elements ändern.
Einfach einen Namen vergeben und ändern.

http://de.selfhtml.org/javascript/spr…ler.htm#onclick
http://de.selfhtml.org/javascript/obj…t_element_by_id
http://de.selfhtml.org/javascript/obj…e_eigenschaften

Painsucker

hey danke aber ich krieg das leider nicht auf die reihe. entweder is dann mein button weg oder das bild statt mein button da
soweit hab ichs jetzt aber es fehlen noch die entscheitenden funktionen.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
<div style="margin:418px 18px;">
<form action="#">
  <p>:<br><input type="text" size="27" maxlength="80"></p>

</form>
</div>


</head>
<body style="background-image:url(bild.jpg); background-repeat:no-repeat;">


<div style="margin:-540px 335px;"> 




 <style>
   a       { display:block;
             background-image:url(button1.jpg);
             width:116px; height:27px }
   a:hover { background-image:url(button2.gif); }
 </style>


</div>
 
</body>




</html>

Alles anzeigen

mein hauptproblem ist das ich nicht hinbekomme, meinen button das onclick zuzuweisen. mit den beispielen auf sämtlichen seiten wird es nur mit den standart buttons erklärt.

synaptic

der button benötigt dann auch das attribut onclick="" und du musst im script ne funktion schreiben..
peitsch ma nen quelltext rüber, bei dem du bilder etc mit absoluten urls hast statt relativen und schreib auch mal was du bisher gescripted hast.. ganz werden wir deine arbeit da nicht erledigen, wir leisten hilfe zur selbsthilfe!

habs auch mal in den richtigen bereich verschoben

Painsucker

also hier is der link
http://ycx.yc.funpic.de/Projekt/evil.html

die sprechblase soll aber erst unsichtbar sein und beim klick auf den button ganz unten soll sie erst erscheinen. der button sollte eigentlich weiter oben sein aber er verschiebt sich wenn das bild weg ist, und auch die anderen elemnte die ich mit margin definiert hatte. wie kann ich das ändern?

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>


<script>
function toggledisplay (id){
  if (document.getElementById) {
    var mydiv = document.getElementById(id);
    mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
  }
}
</script>
<div style="margin:160px 180px;">
<div id="hiddendiv"><img src="http://ycx.yc.funpic.de/Projekt/text1.gif" alt=""> </div>
</div>
<div style="margin:40px 0px;">
<font size="1">
<script type="text/javascript">
document.write('<table><tr><td id="beispiel" style="border:0px ridge gold;padding:0px;color:white;background-color:none;"> </td></tr></table>');
treffen = new Date(2012,11,22);
jetzt = new Date();
if (treffen < jetzt)
{
monat = jetzt.getMonth();
monat++;
jahr = jetzt.getFullYear();
treffen.setMonth(monat);
treffen.setFullYear(jahr);
}


function countdown()
{
jetzt = new Date();
rest = treffen - jetzt;
rest = Math.floor(rest/1000);


tage = Math.floor(rest/86400);
rest %= 86400;


stunden = Math.floor(rest/3600);
if (stunden < 10) stunden = "0" + stunden;
rest %= 3600;


minuten = Math.floor(rest/60);
if (minuten < 10) minuten = "0" + minuten;
rest %= 60;


sekunden = rest;
if (sekunden < 10) sekunden = "0" + sekunden;


document.getElementById('beispiel').innerHTML='Noch '+tage+' Tage und <p> '+stunden+':'+minuten+':'+sekunden+' <p>bis zum Weltuntergang';
}


setInterval('countdown()',1);
</script><br>
</font>
</div>


 <div style="margin:418px 18px;">
<form action="#">
  <p>:<br><input type="text" size="27" maxlength="80"></p>

</form>
</div>




</head>
<body style="background-image:url(http://ycx.yc.funpic.de/Projekt/pokerevil2.jpg); background-repeat:no-repeat;">




 <title>Evil Poker</title>




<div style="margin:-540px 335px;"> 
<a href="#" onClick="javascript:toggledisplay('hiddendiv'); return false" title=""></a>




 <style>
   a       { display:block;
             background-image:url(http://ycx.yc.funpic.de/Projekt/button1.jpg);
             width:116px; height:27px }
   a:hover { background-image:url(http://ycx.yc.funpic.de/Projekt/button2.gif); }
 


</style>
 
</div>
 
</body>


</html>

Alles anzeigen

Painsucker

habs nun alleine hinbekommen danke

klick auf Button, Bild aufploppen

Tags

Benutzer online in diesem Thema