Bildveränderung beim Überfahren des Bildes

[FoxRacer38]

Hallo, da ich ziemlich neu hier bin und nicht wusste welches Forum ich verwenden soll, habe ich gedacht ich schreibe es einfach hier rein. Ich hoffe ihr reißt mir den Kopf nicht ab.
Bin mit einem Kumpel dabei, eine Webseite für unsere Feuerwehr aufzubauen. Wir wollen Fahrzeugbilder einfügen, bei dem sich die Geräteräume öffnen, wenn man mit dem Mauszeiger darüber fährt! Außerdem sollte sich dann dieses geöffnete Bild als Popup anzeigen lassen! Ich hoffe ihr versteh was ich meine!

Da wir absolut keine Ahnung haben wie was funktioniert, ob man da ein Programm braucht, usw.wollten wir hier mal fragen! ich hoffe Ihr könnt mir helfen!?

Als Bildbearbeitungsprogramm verwenden wir Paint.net! Die Homepage erstellen wir mit Joomla!

 

[Maik]

Hi,

für Euer Vorhaben wird Javascript benötigt, wie z.B. die open()-Methode, um ein Popup zu öffnen, weshalb ich das Thema in den passenden Forenbereich verschiebe.

Über die Suchfunktion im JS-Board lassen sich auch unzählige Lösungsbeispiele finden, wie sich mit JS ein Bildertausch realisieren lässt, falls dies Eure Vorstellung ist, was das "Öffnen der Geräteräume" betrifft, wenn man mit der Maus über die Fahrzeugbilder fährt.

mfg Maik

 

[M4st3r]

Das, was du brauchst, sind erst einmal 2 Bilder, eines mit geschlossenen und das andere mit offnen Geräteräumen und dann noch ein wenig Javascript das dir beim OnMouseOver das Bild ändert und beim OnMouseOut wieder zurück ändert.

Nehmen wir an, dass die Bilder für ein DIV-Container als Background-Image per CSS gesetzt sind. Der Container könnte dann so aussehen:

<div style="background-image: url('bildPfad/Car_00_zu.jpg');" onMouseOver="swapImage(this, true);" onMouseOut="swapImage(this, false);"
ImageNameZu="Car_00_zu.jpg"
ImageNameOffen="Car_00_auf.jpg"
>

function swapImage(ctrl, isMouseOver)
{
  var imagePath = "../pfadZuDenBildern/";
  // isMouseOver gibt an, ob die Maus gerade über dem Bild liegt (true)oder nicht (false)
  var imageName = new String();

  if(isMouseOver)
  { 
       imageName = ctrl.getAttribute("ImageNameOffen"); 
  }
  else
    imageName = ctrl.getAttribute("ImageNameZu"); 

  ctrl.style.backgroundImage = url(imagePath + imageName);
}

Ich habs jetzt nicht wirklich getestet und die Idee ist meinem noch müden Hirn entsprungen, aber so, oder so ähnlich solltet ihr das hinbekommen. Im Notfall hilft auch noch SelfHTML ;-)