Panoramabild als "Rundgang" im CSS Template

[Donatien]

Hallo
Ich bin dabei, mir eine CSS basierende Homepage zu erstellen.
Nun möchte ich ein Panoramabild (1515X300 Pixel) so einbinden, dass jeweils ein Bereich von 500X300 Pixel zu sehen ist.

Die einzigste Aktion soll dabei das Verschieben mit der Maus nach links und rechts sein.


Ich hoffe, Ihr könnt mir dabei helfen.

Danke

p.s.: Das bild liegt im Unterverzeichnis /images/panorama.jpg

 

[sokie]

AW: Panoramabild als "Rundgang" im CSS Template

alles was mit Mausaktionen oder anders interaktiv ist, ist Sache von Javascript. Mit CSS kommst du da nicht voran.
bei Javascript können frameworks helfen, wie zB

 

[jackprince]

AW: Panoramabild als "Rundgang" im CSS Template

Sowas wäre zwar auch mit CSS allein möglich, hätte aber bestenfalls experimentellen Charakter.

Wie sokie schon sagte ist dafür JavaScript die beste Variante und das der Einfachheit halber eben auch per Framework.

Spontan denke ich an ein recht einfaches JS welches Bereiche oder Knöpfe rechts und links im sichtbaren Bereich bzw. deine gewünschten Größe hat und bei klick oder Hover z.B. die Background position des Bildes entsprechend ändert.

Die andere Methode wäre natürlich das von sokie angeführte "draggen" des Bildes, also z.B. rechts klicken und nach links ziehen.

Geschmackssache bzw. natürlich die Frage was genau du erreichen möchtest.

 

[hedoo]

AW: Panoramabild als "Rundgang" im CSS Template

Hallo vielleicht hilft dir dieses Script weiter:


Gruß
hedoo

 

[Donatien]

AW: Panoramabild als "Rundgang" im CSS Template

Hallo hedoo
Recht herzlichen Dank für deine Mühe, genau das habe ich gesucht, da ich selbst von Java keine Ahnung habe!

Nun stellt sich noch ein "Problem" ..

Ich habe die Scriptdatei angepasst, den Eintrag vorgenommen:
"<div align="center" id="panorama" style="margin:0px;"><img src="panorama.jpg" style="width:600px;height:300px;" /></div>"

aber leider funktioniert align="center" nicht :-(
Das Bild wird am linken Rand angezeigt
woran liegt es?

 

[Manfred62]

AW: Panoramabild als "Rundgang" im CSS Template

Stell das Beispiel online.

Manfred

 

[Donatien]

AW: Panoramabild als "Rundgang" im CSS Template

Online stellen ändert nun garnichts daran.
Der div Eintrag funktioniert einwandfrei.
Leider aber nicht der ZUSATZ ( align="center") den ich eingefügt habe.

 

[hedoo]

AW: Panoramabild als "Rundgang" im CSS Template

Ohne das Script selbst ausprobiert zu haben...
versuche mal:
<div style="width: 600px; height: 300px; overflow: hidden;" id="panorama"><img scr="panaorama.jpg" width="1515" height="300" style="margin-left:-750px;" /></div>

 

[Donatien]

AW: Panoramabild als "Rundgang" im CSS Template

Danke noch mal für deine Hilfe, das hat nicht funktioniert.

Aber ich habe es jetzt ohne align="center" und statt dessen mit Margin 0 0 0 70px geregelt. Das funktioniert jetzt

 

[jackprince]

AW: Panoramabild als "Rundgang" im CSS Template

den center effekt solltest du erhalten
wenn du auf das eltern element im css festlegst

"text-align: center;"

und auf das zu zentrierende Element

"margin: 0 auto;"

 

[Manfred62]

AW: Panoramabild als "Rundgang" im CSS Template

Online stellen ändert nun garnichts daran.

Mit online Testcase tun sich die Helfer leichter. Siehst ja an den Antworten:

könnte sein, vermute mal, versuche mal...

Der div Eintrag funktioniert einwandfrei.

Sorry, Verzeihung, wie konnte ich daran nur zweifeln 8)
Aber da ja alles einwandfrei funktioniert --> suuuper.