 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
mcbethy
Threadersteller
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht: 
|
Verfasst Mo 17.05.2004 16:13
Titel JS: mit onClick 2 Grafiken gleichz. austauschen. Wie? |
  |
|
Es ist mal wieder so weit! Ich brauche eure Hilfe.
Ich bin gerade dabei einer Navigation etwas Leben einzuhauchen.
Mal ein Beispiel:
Ich habe den Button "Markt" mit dem Namen "markt_". Die Schrift ist grau.
Beim Mouseover wird die Schrift rot, beim Mouseout wird das Bild in seinen Normalzustand gesetzt.
Und klar: onClick ist dann wieder der Button mit roter Schrift.
Etwas weiter unten in der Seite soll ebenfalls ein Bild ausgetauscht werden, wenn man auf "Markt" klickt.
Dieses Bild soll so lange unangetastet bleiben, bis ein anderer Menüpunkt angeklickt wird.
Wie schaffe ich es, 2 Bilder gleichzeitig anzusprechen?
Zur Veranschaulichung hier einmal das Script:
| Code: | if (navigator.appVersion.indexOf("2.") != -1){
check = false;
}
if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){
check = false;
}
else {
check = true;
}
if (check == true){
markt_ = new Image(); markt_.src = "images/bu/markt.gif";
markt_on = new Image(); markt_on.src = "images/bu/markt_hi.gif";
markt_stay = new Image(); markt_stay.src = "images/bu/markt_hi.gif";
}
imageStay = ""
function imageon(name){
if (imageStay != name){
document[name].src = eval(name + "on.src");
}
}
function imageoff(name){
if (imageStay != name){
document[name].src = eval(name + ".src");
}
}
function stay(name){
if (check == true){
document[name].src = eval(name + "stay.src");
if (imageStay != name){
if (imageStay != ""){
document[imageStay].src = eval(imageStay + ".src");
}
}
imageStay = name
}
} |
Und hier der Button mit dem Script:
| Code: | | <a href="#" onMouseover="imageon('markt_')" onMouseout="imageoff('markt_')" onClick="stay('markt_')";><img src="images/bu/markt.gif" name="markt_" width="71" height="12" border="0"></a> |
Ich wäre euch echt dankbar, wenn ihr einen Lösungsansatz dazu hättet.
Danke im Voraus!
Zuletzt bearbeitet von mcbethy am Mo 17.05.2004 16:14, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
tuxedo
Dabei seit: 10.10.2002
Ort: ~/
Alter: 51
Geschlecht: -
|
Verfasst Mo 17.05.2004 17:16
Titel
|
|
|
hab da mal vor n paar wochen n script geschrieben und grad was erweitert:
click
so in etwa?
//stör dich nicht an diesem ballast im qt, kommt alles von diesen lycos-spinnern
hier mal der etwas überarbeitete qt:
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="check.css" type="text/css">
<title>clicked,over and out...</title>
<script language="JavaScript">
normalContainer = new Array ("../gfx/button1normal.gif","../gfx/button2normal.gif","../gfx/button2normal.gif");
overContainer = new Array ("../gfx/button1over.gif","../gfx/button2over.gif","../gfx/button2over.gif");
clickedContainer = new Array ("../gfx/button1clicked.gif","../gfx/button2clicked.gif","../gfx/button3clicked.gif");
changeContainer = new Array ("../gfx/button1over.gif","../gfx/button1clicked.gif","../gfx/button2normal.gif");
imageContainer = new Array ();
var imageCount = normalContainer.length;
var imagePraefix = "image_";
for (i=0;i<imageCount;i++){
imageContainer[i] = new Object();
imageContainer[i].normal = normalContainer [i]
imageContainer[i].over = overContainer [i]
imageContainer[i].clicked = clickedContainer [i]
imageContainer[i].clickCheck = false;
}
function imageManager (direction,target,changeTo,overText) {
var number = target.slice (imagePraefix.length);
if (overText == undefined){
overText = "nicht vorhanden";
}
if (!imageContainer[number].clickCheck){
if (direction == "over"){
document.images[target].src = imageContainer[number].over;
document.images[target].alt = overText
} else if (direction == "out"){
document.images[target].src = imageContainer[number].normal;
} else if (direction == "click"){
for (i=0;i<imageCount;i++){
resetImage = imagePraefix + i;
document.images[resetImage].src = imageContainer[i].normal;
imageContainer[i].clickCheck = false;
}
document.images[target].src = imageContainer[number].clicked;
document.images["changeOnce"].src = changeContainer[changeTo];
imageContainer[number].clickCheck = true;
}
}
}
//-->
</script>
</head>
<body bgcolor="#333333">
<a href="#" onClick="imageManager('click','image_0','0');" onMouseOver="imageManager('over','image_0','','over1');" onMouseOut="imageManager('out','image_0');"><img src="../gfx/button1normal.gif" width="120" height="40" border="0" name="image_0"></a><br>
<a href="#" onClick="imageManager('click','image_1','1');" onMouseOver="imageManager('over','image_1','','over2');" onMouseOut="imageManager('out','image_1');"><img src="../gfx/button2normal.gif" width="120" height="40" border="0" name="image_1"></a><br>
<a href="#" onClick="imageManager('click','image_2','2');" onMouseOver="imageManager('over','image_2','','over3');" onMouseOut="imageManager('out','image_2');"><img src="../gfx/button3normal.gif" width="120" height="40" border="0" name="image_2"></a><br>
<br><br><br>
<img src="../gfx/button3normal.gif" width="120" height="40" border="0" name="changeOnce"><br>
</body>
</html>
|
ist "fast" selbsterklärend...
gruss
tux
|
|
| |
|
|
|
Anzeige
|
|
|
mcbethy
Threadersteller
Dabei seit: 02.12.2002
Ort: Hamburg
Alter: 41
Geschlecht:
|
Verfasst Mo 17.05.2004 17:41
Titel
|
|
|
Vielen Dank erst einmal.
*schluck* O-wei, das sieht ja nun ganz anders aus als das meine.
Kann meines nicht entsprechend erweitert werden? Irgendwie fehlt mir da das logische Denken, glaub ich.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[Javascript] Mouseover-mehrere Grafiken austauschen
onclick-Event bei onclick dieses Elements ändern
JS - Onclick in PHP-DB-Abfrage...
onclick funktion
onClick Handler
Zufallsbild mit Onclick...
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
