Botton-hover/-click fehler

Valker · 12 August 2008

Hallo !

Atm bin ich fleißig am herumschrauben meiner webseite.
Layout is fertig, div verlegt und nun sitz ich an den button.
Zuerst wollte ich das alles in flash machen, jeodch isses mir dann soch zu aufwändig gewesen.

Aber jetzt zu meinem Problem.

Ich will meine Button so gestallten, dass bei "mouseover" und "mousedown" der button jeweils (mit 2 anderen bildern, ein "klick" u. eins "hover") ausgetauscht wird.
Soweit sogut.
Nur jenen funktionen muss der button ja wiederhergestellt werden.
Auch kein Problem an aun für sich, alsi schnell eine "mouseout" funktion reingehaut.
Nur leider ergibt sich da ein kleines problem.
Hover geht, click geht, nur wenn der button weiderhergestellt werden soll, stellt er mir den hover-button weider her.
Sieht dähmlich aus ^^

So hier is mal mein code:

HTML:

<img src="data/page/btn/btn_top/btn/btn_aufnahme_ja.png" width="152" height="49" id="img1" alt="aufnahme: JA" 

onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn_hover/btn_hover_aufnahme_ja.png');" 

onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn_click/btn_click_aufnahme_ja.png')" 

onmouseout="FP_swapImgRestore()" />

bitte bitte helft mir, bin am verzweifeln !

1000xDanke im voraus !

ingoS · 12 August 2008

Dann verwende doch einfach das, was bei onmouseover steht, für onmouseout, nur mit der URL zum Normalzustand-Bild.
Oder du verwendest einfach CSS, wie in meiner Signatur verlinkt.
"div verlegt" hört sich außerdem so an als müsstest du dir sowieso über den Code deiner Seite noch einmal Gedanken machen.

Valker · 12 August 2008

Mouseclick zu verlinken geht leider auch nicht....gleicher Effekt, merkwürdiger weise.

und deine methode kann ch auch nicht verwenden da das hover eine (kleine) animation ist.

also ich versuch noch ein bissl herumzubasteln, aber irgendwie gehts nicht.

btw: das div ist nicht wichtig, weil das bild selbst in nem div liegt, habe wohl was falsches mitkopiert.

edit. möglicherweise sollte ich den fehle genauer beschreiben:

1. Seite läd
2. button da
3. Mouseover geht
4. button wiederhergestellt
5. dann ein klick auf den button
6. geklickter button wird eingeblendet
7. mous wieder weg.
8. *ERROR* bild ist hovered und nicht in der "ausgangsposition"
9. bleibt hovered

ich hoffe das hilft n bissl

ingoS · 12 August 2008

In diesem Fall würde ein Link zu der Seite oder wenigstens der JavaScript-Code, in dem die Funktionen FP_swapImg und die FP_swapImgRestore enthalten sind, die Sache enorm erleichtern.
Mit HTML hat das Ganze auch nichts zu tun, aber ich warte erst mal mit dem Verschieben...

EDIT: Das Problem hatte ich auch schon nach deinem ersten Beitrag verstanden, nur kann man es ohne Link und ohne Code trotzdem nicht lösen. ;)

Valker · 12 August 2008

k, dann stell ich mal das ding provisorisch ins net.

so, hochgeladen: Trinitas - die Asmodier Gilde

und hier is mal der gesamte seitencode, wenn das was hilft:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trinitas - die Asmodier Gilde</title>
<style type="text/css">
.hintergrund {
    font-size: 0px;
}
</style>

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript">
<!--
function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImgRestore() {//v1.0
 var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
  var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } 
  doc.$imgSwaps=null; }
}

function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
 else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
 if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
 for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
 f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
 for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
 return null;
}
// -->
</script>

</head>
<body style="background-image: url('data/page/bg/bg_main/bg_fortlaufend.png')" onload="FP_preloadImgs(/*url*/'data/page/btn/btn_top/btn_click/btn_click_aufnahme_ja.png',/*url*/'data/page/btn/btn_top/btn_hover/btn_hover_aufnahme_ja.png')">

<div style="height: 2048px; width: 1024px; background-color: #FFFFFF; position: absolute; top: 0; left: 50%; margin-left: -512px; font-family: Arial, Helvetica, Sans-Serif, Verdana, 'Arial Rounded MT Bold'; font-size: x-small; color: #7EACC3; background-repeat: no-repeat; background-attachment: scroll; background-image: url('data/page/hauptseite/bg/Layout.png');" class="main" id="main"
>
<div style="position: absolute; width: 231px; height: 1685px; z-index: 1; left: 793px; top: 363px; background-color: #7EACC3; background-image: url('data/page/bg/bg_main/bg_bar_rechts.png')" id="right">
</div>
<div style="position: absolute; width: 567px; height: 1636px; z-index: 2; left: 226px; top: 412px; background-color: #7EACC3; background-image: url('data/page/bg/bg_main/bg_content_leer.png')" id="content">
</div>
<div style="position: absolute; width: 567px; height: 49px; z-index: 4; left: 226px; top: 363px; background-color: #7EACC3; background-image: url('data/page/bg/bg_main/bg_bar_top.png')" id="buttons_top" class="style1">
    <div style="position: absolute; width: 91px; height: 49px; z-index: 1; left: 323px" id="handel">
    </div>
    <div style="position: absolute; width: 152px; height: 49px; z-index: 4" id="aufnahme">
    <img src="data/page/btn/btn_top/btn/btn_aufnahme_ja.png" width="152" height="49" id="img1" alt="aufnahme: JA" onmouseout="FP_swapImgRestore()" onmousedown="FP_swapImg(1,1,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn_click/btn_click_aufnahme_ja.png')" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn_hover/btn_hover_aufnahme_ja.png')" /></div>
    
    <div style="position: absolute; width: 90px; height: 49px; z-index: 3; left: 152px; top: 0px; right: 325px;" id="mitglieder">
    </div>
    <div style="position: absolute; width: 81px; height: 49px; z-index: 2; left: 242px; top: -0px" id="news">
    </div>
    <div style="position: absolute; width: 153px; height: 49px; z-index: 5; left: 414px" id="Ebene1">
    </div>
</div>
<div style="position: absolute; width: 201px; height: 1685px; z-index: 5; left: 25px; top: 363px; background-color: #7EACC3; background-image: url('data/page/bg/bg_main/bg_bar_links_btn.png')" id="buttons_right">
</div>
<div style="position: absolute; width: 1024px; height: 363px; z-index: 7; background-color: #7EACC3; background-image: url('data/page/bg/bg_main/bg_top.png')" id="top">
</div>
<div style="position: absolute; width: 25px; height: 1685px; z-index: 6; left: 0px; top: 363px; background-color: #7EACC3; background-image: url('data/page/bg/bg_main/bg_bar_links.png')" id="left">
</div>
</div>

</body>

</html>

Ps: kannst du mir vielleicht noch sagen wie ich dieses ï»¿ in der ecke meiner page wegbekomme ? komischerweise wirds offline nicht angezeigt.

Maxi · 12 August 2008

Valker schrieb:
Ps: kannst du mir vielleicht noch sagen wie ich dieses ï»¿ in der ecke meiner page wegbekomme ? komischerweise wirds offline nicht angezeigt.

versuch mal ne andere Codierung wie utf-8.

Valker · 12 August 2008

wär nur schön wenn ich auch wüsste wie ^^

Maxi · 12 August 2008

tausche mal das utf-8 in deinem Header gegen ISO-8859-1 aus.

Valker · 12 August 2008

super ! hat funktioniert.
Und nun zurück zum hauptproblem

ingoS · 12 August 2008

So ganz verstehe ich immer noch nicht, warum du nicht einfach statt dem hier

Code:

onmouseout="FP_swapImgRestore()"

das hier nimmst:

Code:

onmouseout="FP_swapImg(1,1,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn_click/btn_aufnahme_ja.png')"

Ich sehe auch keine Animation, welche die CSS-Methode beeinträchtigen würde.

Ansonsten könnte es eventuell sein, dass du die Eventhandler in der richtigen Reihenfolge schreiben musst, also erst onmouseover, dann onmousedown und zum Schluss onmouseout.

Valker · 13 August 2008

die animation betrifft die buttons links, wobei dort das problem natürlich auch auftritt. und wie gesagt das einsetzen hat leider gar keinen unterscheid erbracht, aba ich werd mal die reihenfolge ändern um zu sehn obs jetzt geht.

eine lösung die mir grade eingefallen ist....zwar nicht so schön, aber kann man der funktion nicht einen timer von ein paar millisekunden verpassen, die dann das bild resettet ?
Geht das bzw wie wüsste so ein timer aussehen ?

edit: so, code geändert, geht noch immer nicht Q! *heul*

Code:

<script type="text/javascript">
<!--
function FP_preloadImgs() {//v1.0
 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
 for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
 else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
 if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
 for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
 f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
 for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
 return null;
}

function FP_swapImgRestore() {//v1.0
 var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
  var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } 
  doc.$imgSwaps=null; }
}
// -->
</script>


<img src="data/page/btn/btn_top/btn/btn_aufnahme_ja.png" width="152" height="49" id="img1" alt="aufnahme: JA" 
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn_hover/btn_hover_aufnahme_ja.png');" 
onclick="FP_swapImg(1,0,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn_click/btn_click_aufnahme_ja.png')" 
onmouseout="FP_swapImgRestore(1,0,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn/btn_aufnahme_ja.png')" />

edit: ich Habs !!!!!!!!!!!!
Die lösung is echt lächerlich. Nein, kein weiderherstellen, das bild wird bei mouseout einfach neu geladen.

aktueller code anstelle von "FP_swapImgRestore(1,0,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn/btn_aufnahme_ja.png')":

Code:

onmouseout="[U]FP_swapImg[/U](1,0,/*id*/'img1',/*url*/'data/page/btn/btn_top/btn/btn_aufnahme_ja.png')"

ingoS · 20 August 2008

Auch wenn das Thema schon älter ist, wollte ich der Vollständigkeit halber nur anmerken, dass ich genau diese Lösung hier von vornherein schon gepostet hatte, sie aber anscheinend vollkommen missverstanden, nicht richtig angewendet oder ignoriert wurde.

Botton-hover/-click fehler

Valker

Neues Mitglied

ingoS

Aktives Mitglied

Valker

Neues Mitglied

ingoS

Aktives Mitglied

Valker

Neues Mitglied

Maxi

Neues Mitglied

Valker

Neues Mitglied

Maxi

Neues Mitglied

Valker

Neues Mitglied

ingoS

Aktives Mitglied

Valker

Neues Mitglied

ingoS

Aktives Mitglied

Neueste Beiträge