hilfdirselbst.ch
Facebook Twitter gamper-media
"Funktioniert nicht" ist keine hinreichende Fehlerbeschreibung.
Fly
Beiträge: 77
6. Apr 2003, 00:18
Beitrag #1 von 4
Bewertung:
(591 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Mouseover, dass stehen bleibt. nicht mehr als 4 Bilder???


ich tüftel gerade an einem java-script rum und habe ein kleines problem:
es geht um eine button-leiste, wenn man einen button angeklickt hat, soll ein
bild mit einem pfeil stehenbleiben.

bei den ersten vier funktioniert es wunderbar.
ab dem fünften bleibt nach dem anklicken eines neuen buttens immer der pfeil stehen.
er verschwindet allerdings, wenn man dann mit der mouse drüberfährt.

falls ihr jetzt nix verstanden hast, probiert es einfach mal aus,
ihr werdet schon sehen, was ich meine :o)

http://www.debaakel.de/...main/button_test.htm


hinweis:
ich habe das script als vorgabe für geneu 4 buttons gefunden.
kann es sein, dass man es gar nicht erweitern kann???


hoffe auf hilfe.
liebe grüße
die FLY

Top
 
X
Miro Dietiker
Beiträge: 699
6. Apr 2003, 04:17
Beitrag #2 von 4
Beitrag ID: #30689
Bewertung:
(591 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Mouseover, dass stehen bleibt. nicht mehr als 4 Bilder???


Die Funktion klick(..) ist nur für 4Buttons gemacht...
Da müsste man folgendes:

function klick(i,a,b,c,d)
{ ...
}
ändern zu:

function klick(i,a,b,c,d,e,f,g,h,i,j)
{
if (browser == 1)
{
if (geklickt != i)
{
document.images.src = bildclick.src;
document.images[a].src = bildaus[a].src;
document.images.src = bildaus.src;
document.images[c].src = bildaus[c].src;
document.images[d].src = bildaus[d].src;
document.images[e].src = bildaus[e].src;
document.images[f].src = bildaus[f].src;
document.images[g].src = bildaus[g].src;
document.images[h].src = bildaus[h].src;
document.images.src = bildaus.src;
document.images[j].src = bildaus[j].src;
}
}
geklickt = i;
}

Finde ich aber nicht so optimal..

GrEeZ: Miro Dietiker
als Antwort auf: [#30682] Top
 
Anonym
Beiträge: 22827
6. Apr 2003, 11:17
Beitrag #3 von 4
Beitrag ID: #30707
Bewertung:
(591 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Mouseover, dass stehen bleibt. nicht mehr als 4 Bilder???


habs gleich mal probiert, aber jetzt geht gar nichts mehr :o(
ist nur noch ein ganz normales mouseover zu sehen:

http://www.debaakel.de/...main/button_test.htm

aber warum findest du das nicht so toll?
was würdest du denn machen?
ich bin jeden vorschlag offen, es ist nur einfach das einzige kostenlose, was ich bisher dazu gefunden habe...

liebe grüße
und DANKE
die FLY
als Antwort auf: [#30682] Top
 
exquisitus
Beiträge: 247
6. Apr 2003, 15:37
Beitrag #4 von 4
Beitrag ID: #30737
Bewertung:
(591 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Mouseover, dass stehen bleibt. nicht mehr als 4 Bilder???


hallo fly

hier eine mögliche lösung:

//------------------------------

<html>

<head>
<title>JavaScript - 3 Buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
<!--

// der konstruktor für das menu objekt
function Menu() {

// das verzeichnis in dem die menubilder sind
this.imageDirectory = "images/";

// der indentifikator für "normal" im bild-dateinamen
this.imageNormalSuffix = "_normal";

// der indentifikator für "over" im bild-dateinamen
this.imageOverSuffix = "_over";

// der indentifikator für "selected" im bild-dateinamen. (in diesem beispiel gleich wie "over")
this.imageSelectedSuffix = "_over";

// die dateiendung der bild-dateien
this.imageFileSuffix = ".gif";

// die namen der bilder. im html code MÜSSEN die bilder gleich heissen wie hier angegeben.
// also: <img name="menu1" src="images/menu1_normal.gif"> usw.
this.imageBaseNames = new Array("menu1", "menu2", "menu3", "menu4", "menu5", "menu6", "menu7", "menu8", "menu9");

/*
dieses beispiel geht davon aus dass die dateinamen der bilder wie folgt gewählt sind:
normal: menu1_normal.gif
over: menu1_over.gif
selected: menu1_selected.gif (oder eben gleich wie over falls es kein eigenes bild für selected gibt)
*/

// ein array welcher die selbst erzeugten bild-objekte hält
this.menuImages = new Array();

// referenz zum zuletzt geklickten menu-item
this.currentSelection = null;

// intialisierung des menus.
// hier wird der "menuImages" array abgefüllt, bilder preloaded usw.
this.initialize = function() {
for (var i=0; i<this.imageBaseNames.length; i++) {
// ein objekt welches die verschiedenen bild-objekte hält
var obj = new Object();
obj.normal = new Image();
obj.normal.src = this.imageDirectory + this.imageBaseNames + this.imageNormalSuffix + this.imageFileSuffix;
obj.over = new Image();
obj.over.src = this.imageDirectory + this.imageBaseNames + this.imageOverSuffix + this.imageFileSuffix;
obj.selected = new Image();
obj.selected.src = this.imageDirectory + this.imageBaseNames + this.imageSelectedSuffix + this.imageFileSuffix;

// referenz auf das bild im html-baum
obj.element = document.images[this.imageBaseNames];

// hier wird die soeben erzeugte bild-objekt-gruppe in den menuImages array geschrieben
this.menuImages = obj;
}
};

// setzt das n-te menuitem auf "normal" sofern es sich dabei nicht um das selektierte handelt
this.setNormal = function(index) {
if (this.currentSelection != index) {
this.menuImages[index].element.src = this.menuImages[index].normal.src;
}
};

// setzt das n-te menuitem auf "over" sofern es sich dabei nicht um das selektierte handelt
this.setOver = function(index) {
if (this.currentSelection != index) {
this.menuImages[index].element.src = this.menuImages[index].over.src;
}
};

// setzt das n-te menuitem auf "selected" und merkt sich welchen index es hat
this.setSelected = function(index) {
this.resetSelection();
this.currentSelection = index;
this.menuImages[index].element.src = this.menuImages[index].selected.src;
};

// setzt das zuletzt selektierte menuitem zurück auf "normal"
this.resetSelection = function() {
if (this.currentSelection != null) {
this.menuImages[this.currentSelection].element.src = this.menuImages[this.currentSelection].normal.src;
}
};

// initialisierung des menu objektes aufrufen.
this.initialize();
return this;
}


// globale variable in welche nachher das menu instanziert wird
var menu = null;

// onload handler welcher ausgeführt wird wenn die seite komplett geladen ist
onload = function() {
// instanzierung/erzeugung des menus
menu = new Menu();

// optional:
// ein beliebiges menuitem default-mässig auf selected setzen
//menu.setSelected(0);
menu.setSelected(3);
};

// -->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#0000FF" alink="#0000FF" topmargin="10" leftmargin="10">
<table width="100" height="75%" border="0">
<tr height="120"><td height="120">&nbsp;</td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(0)" onmouseout="menu.setNormal(0)" onclick="menu.setSelected(0);"><img src="images/menu1_normal.gif" name="menu1" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(1)" onmouseout="menu.setNormal(1)" onclick="menu.setSelected(1);"><img src="images/menu2_normal.gif" name="menu2" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(2)" onmouseout="menu.setNormal(2)" onclick="menu.setSelected(2);"><img src="images/menu3_normal.gif" name="menu3" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(3)" onmouseout="menu.setNormal(3)" onclick="menu.setSelected(3);"><img src="images/menu4_normal.gif" name="menu4" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(4)" onmouseout="menu.setNormal(4)" onclick="menu.setSelected(4);"><img src="images/menu5_normal.gif" name="menu5" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(5)" onmouseout="menu.setNormal(5)" onclick="menu.setSelected(5);"><img src="images/menu6_normal.gif" name="menu6" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(6)" onmouseout="menu.setNormal(6)" onclick="menu.setSelected(6);"><img src="images/menu7_normal.gif" name="menu7" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(7)" onmouseout="menu.setNormal(7)" onclick="menu.setSelected(7);"><img src="images/menu8_normal.gif" name="menu8" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(8)" onmouseout="menu.setNormal(8)" onclick="menu.setSelected(8);"><img src="images/menu9_normal.gif" name="menu9" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td>&nbsp;</td></tr>
</table>

</body>
</html>

//------------------------------



getestet unter windows 2000 mit:
- Mozilla 1.2.1
- Netscape 7.0
- Netscape 4.75
- IE 6
- Opera 7.02


kannst ja mal schauen ob du damit klar kommst. sonst einfach nachfragen.

hope this helps

liabs grüassli us züri
Steven
als Antwort auf: [#30682] Top
 
X