Vollständige Version anzeigen : Grafiken mit JS wechseln


osiris
28.01.2014, 20:40

Guten Morgen,

habe letztens einen Thread eröffnet, wie ich Zellen in einer Tabelle am Besten anspreche, um diese zu ändern.
( Tabellen Zellen färben, a:active?! - RR:Board (Tabellen-Zellen-f%C3%A4rben-a-active-)!)
Hab das Menü noch einmal überarbeitet, um es ein wenig "moderner" zu machen, ist jetzt keine Tabelle mehr, sondern es sind verschieden viele Div's nebeneinander, welche jeweils eine Grafik beinhalten.

Was ich jetzt möchte ist folgendes:
* Bei MouseOver wird der jeweilige Button Blau. Bei MouseOut wird er wieder weiß. Also ein normales Grafikswitchen.
* Wenn ich nun ein Div anklicke, sollte dieses Blau bleiben, solange, bis ich ein anderes anklicke.

Punkt 1 habe ich ganz einfach mit folgendem gelöst:

<div style="float:left"><a href="javascript:Tauschen('Foto01')"><img id="Foto01" src="menuebutton1;png" onmouseover="this;src='menuebuttonblau1;png'" onmouseout="this;src='menuebutton1;png'" /></a></div>
Wie man sieht, ist hierbei schon das Javascript gelinkt, welches aufgerufen wird, wenn ich den Button anklicke.

Punkt 2 habe ich dann mit folgendem Source zusätzlich so gelöst:


var TauschFotoWeiss = new Array();
var TauschFotoBlau = new Array();

TauschFotoWeiss[1] = "menuebutton1;png";
TauschFotoBlau[1] = "menuebuttonblau1;png";

function Tauschen(foto)
{
AlleAus();
if (foto == "Foto01"){
document;getElementById('Foto01');src = TauschFotoBlau[1];
}
}

function AlleAus()
{
document;getElementById('Foto01');src = TauschFotoWeiss[1];
}



Allerdings funktioniert das ganze Ding nicht wirklich.

Meines Verständnisses nach, sollte ein Klick die Funktion Tauschen aufrufen. Diese ruft als erstes AlleAus auf, welche die Buttons (sind dann mehrere, ist hier nur ein Beispiel) auf die weißen zurücksetzt.
Anschließend wird die image src von Foto01 auf das TauschFotoBlau[1] gewechselt.

(Vermutlich sollte ich die Dinger nicht Foto sondern Buttons nennen;)

Wo liegt der Fehler? :O

Hardware Preisvergleich | Amazon Blitzangebote!

Videos zum Thema
Video Loading...
Chrisomator
28.01.2014, 21:10

Das Hintergrundbild bei einem Hover zu wechseln solltest du am besten per CSS lösen.
Versuche mal die einzelnen Menüpunkte ganz einfach als Link zu deklarieren (a) und diesen dann eine generelle CSS Klasse zu geben die allgemeine Eigenschaften enthält (display: block; float: left; width, height..;) und eine die das entsprechende Hintergrundbild setzt (background: url('..;') no-repeat;).
Die enstprechenden "background Klassen" kannst du dann auch mit dem Selektor :hover ansprechen und dort dann das Hintergrundbild ändern bei einem mouseOver.

Dass die entsprechenden Buttons blau bleiben kannst du am besten mit jQuery lösen, denke ich.
Einfach mit einem allgemeinen Selektor die generelle Klasse der Buttons ansprechen die du zuvor erstellt hast und dann beim Event ;click() die Klasse des Hovers hinzufügen und bei allen anderen Buttons entfernen.

Falls du ein Beispiel brauchst sag bescheid, dann poste ich ein Stück Code.

MfG


osiris
28.01.2014, 22:08

Danke schonmal.

Ist denn das mit onMouseOver outdated (respektive nicht mehr "mode")???
Muss mir das mit dem jQuery und Selektor mal anschauen.

Müsste nicht mein Code theoretisch laufen? Ich seh meinen Fehler einfach nicht, wird wohl ein Denkfehler sein, oder?!


Chrisomator
29.01.2014, 11:55

Also das mit dem onMouseOver solltest du alleine schon deswegen machen, da sonst Benutzer, die Javascript deaktiviert haben, keinen Hover Effekt bekommen.
Das Problem bei deinem Code ist, dass beim Klick zwar das Bild geändert wird, du aber dabei mit dem Cursor im Bild bist. Wenn du nun den Cursor aus dem Bild verschiebst, wird das Event "onMouseOut" wieder aufgerufen und das Bild wird wieder gewechselt.

LG


Nanobyte
29.01.2014, 12:48

Also das mit dem onMouseOver solltest du alleine schon deswegen machen, da sonst Benutzer, die Javascript deaktiviert haben, keinen Hover Effekt bekommen

Wenn Javascript Deaktiviert ist dann wird auch kein onMouseOver ausgelöst, denn das ist ebenfalls Javascript!



Das Styling sowie den Hover-Effekt kommt in die CSS-Datei

style;css
#menu {
display: block;
position: relative;
float: left;
}
#menu a {
display: inline-block;
width: 100px;
height: 40px;
background-color: #fff;
background-repeat: no-repeat;
background-position: 0 0;
}
#menu ;menu-start { background-image: url(images/menuebutton1;png) }
#menu ;menu-start;active, #menu ;menu-start:hover, #menu ;menu-start:focus { background-image: url(images/menuebuttonblau1;png) }

#menu ;menu-news { background-image: url(images/menuebutton2;png) }
#menu ;menu-news;active, #menu ;menu-news:hover, #menu ;menu-news:focus { background-image: url(images/menuebuttonblau2;png) }



index;html
<div id="menu">
<a href=";domain;tld/" class="menu-start">Startseite</a>
<a href=";domain;tld/" class="menu-news">News</a>
</div>



Mit Javascript erledigen wir das hinzufügen und Entfernen einer Klasse (active) wenn auf einen Menupünkt geklickt wurde.

script~js

<script>
var menuItems = document;getElementById('menu');getElementsByTagName('a');

function menuClicked(evt) {
evt;preventDefault();
for(var a=0, b=menuItems;length; a<b; ++a) {
menuItems[a];className = menuItems[a];className;replace(/\bactive\b/,'');
console;log(menuItems[a];className);
}
evt;target;className += ' active';
}

for(var a=0, b=menuItems;length; a<b; ++a) {
menuItems[a];addEventListener('click', menuClicked);
}
</script>


Chrisomator
29.01.2014, 13:17

Wenn Javascript Deaktiviert ist dann wird auch kein onMouseOver ausgelöst, denn das ist ebenfalls Javascript!


Sorry, habe mich falsch ausgedrückt. Meinte natürlich das sollte er wegmachen und mit nem CSS Hover ersetzen.


osiris
29.01.2014, 18:11

Danke sehr, danke schön :)


Ähnliche Themen zu Grafiken mit JS wechseln
  • Grafiken für UP's
    meld dich dan mach ich dir sowas aber dan alles über pn oder icq [...]

  • RR Grafiken
    Wollte ma Fragen ob is irgendwelche Grafiken zum RR Board gib die nen Bisschen Größer so 1024*768 und im Anderen Style so wie das hier bloß Größer und Vielleicht noch im anderen Syle also andere Farben ander Position o;a. hat jemand so was oder kann jemand so etwas machen 10er wär drin ! M [...]

  • 2D-Grafiken
    Nabend! Ich suche jemanden, der in der Lage ist, 2D Kämpfer und die dazugehörigen Grafiken zu erstellen. Bei den Kämpfern soll es sich um MMA-Fighter in einer stehenden Kampfpose handeln. Die Grafiken im allgemein sollen Comicartig sein, aber dennoch realistische Proportionen beinhalten (s [...]

  • ie7 grafiken
    also ich hab ein kleines problem und zwar zeigt ie7 auf manchen seiten keine grafik an sondern nur ein rotes X aber firefox zeigt sie komischerweiße an :( woran kann das liegen ? [...]



raid-rush.ws | Imprint & Contact pr