wie setze ich eine andere Größe für ein roll over bild?

dane7 · 02.05.2013

Hallo, habe meine erste selbst erstellte webseite fast fertig, dabei aber ein Problem: wie kann ich für ein mouse over bild eine andere Größe festlegen (soll größer sein)? Habe nur reine Vergrößerungseffekte gefunden, doch bei mir ist das mouse over bild ein anderes als das ursprüngliche … Zudem möchte ich noch eine kleine *****datei dabei haben, so dass, wenn man mit der Maus über den button geht, das andere, große Bild mittig über dem ersten erscheint + gleichzeitig ein Ton erklingt …
Hoffe, jemand weiß was.
Hier mal der Quelltext (für mich als Anfänger noch schwierig

):

<body onload="MM_preloadImages('Bilder/violett-schein.png')">
<div id="container">
</div>
<div id="button-li"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bina','','Bilder/violett-schein.png',1)"><img src="Bilder/bina-fin10.png" name="bina" width="50" height="42" vspace="8" border="0" id="bina" /></a><a href="#" onmouseout="MM_swapImgRestore()"
</div>

MyBad · 02.05.2013

AW: wie setze ich eine andere Größe für ein roll over bild?

Hallo! Da du noch Anfängerin bist, rate ich dir, dass du dich zunächst einmal mit den Grundlagen von HTML und CSS auseinandersetzen solltest.

JavaScript für Rollovers zu nutzen ist absolut unangebracht in deinem Falle. Zu dem fehlt es deinem QT an Semantik. Bei einer Navigation sollte man daher mit Listen arbeiten, weil es ja eine Auflistung von Menüpunkten ist.

Eine vernünftige Navigation mit HTML & CSS sollte ungefähr so aussehen:

HTML:

<ul>
   <li><a class="button" href="#">Button 1</a></li>
   <li><a class="button" href="#">Button 2</a></li>
</ul>

CSS:

HTML:

   .button{
         background: url('pfad_zu_deinem_bild/normal.png') ... ;
         width: ...px;
         height: ...px;
         ...
   }
   .button:hover{
      background: url('pfad_zu_deinem_bild/rollover.png') ... ;
  }

Das nur als Q&D Beispiel. Bei Rollover-Grafiken schickt es sich mit s. g. Sprites (eine Grafik, in der alle Zustände z. B. eines Buttons enthalten sind) zu arbeiten.

Hier mal ein Tutorial zum Thema: http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

Ich gehe mal davon aus, dass du die Designansicht von Dreamweaver nutzt!? Wenn ja, vergiss diese und verschaffe dir Grundlagenwissen in HTML & CSS. Alles andere wird dich immer wieder vor Probleme stellen, weil einfach keine Basis da ist.

Für die Wiedergabe eines Sounds musst du allerdings wieder auf JavaScript zurückgreifen. Allerdings würde ich von solchen Spielerein grundsätzlich abraten.

dane7 · 02.05.2013

AW: wie setze ich eine andere Größe für ein roll over bild?

Danke für deine schnelle Antwort, und ja, ich bin blutige Anfängerin + habe mich erst ein wenig mit HTML + CSS auseinandergesetzt, möchte aber eine Seite erstellen, die auch funktioniert + lerne immer weiter.

Was ist ein Sprite? Aus der engl. Seite werde ich leider nicht ganz schlau …

Muss ich bei der hover-Klasse nicht auch Höhe + Breite angeben? Denn dieses soll ja größer sein, + wie kann ich die Position beeinflussen?

Die Töne haben übrigens einen Zweck – es ist eine Seite für ein Klang-Therapie-Zentrum.

Ich fang jetzt mal an, es auszuprobieren.

MyBad · 02.05.2013

AW: wie setze ich eine andere Größe für ein roll over bild?

Mit der Angabe von "width" und "height" lässt sich natürlich auch die Größe deines Buttons beeinflussen. Die Pseudo-Klasse ":hover" kann eine andere Größe bekommen als die Eigenschaften für die Klasse "button". Wichtig dabei ist, dass du das A-Element auf "display: block;" setzt. Per Default ist es nämlich ein Inline-Element.

Gerade, wenn es hier um ein Therapiezentrum geht, ist es doch noch umso wichtiger das Ganze möglichst Barrierefrei und semantisch sinnvoll zu gestalten / zu schreiben. Da sind Spielereien besonders fehl am Platz.

Hier aber mal ein Tutorial zum Thema. Ein deutsches habe ich leider nicht gefunden auf die Schnelle: http://webdesign.about.com/od/sound/a/play_sound_oncl.htm

Zu den Sprites: Eine Erklärung hatte ich bereits in Kurzform angegeben. Dabei handelt es sich um eine Grafik, die alle Zustände (in deinem Falle, die eines Buttons) beinhaltet. Der Vorteil ist, dass hier nicht beim Ändern des Zustandes bei "rollover" eine weitere Grafik geladen werden muss. Das hat nämlich den Nachteil, dass die Rollover-Grafik erst verzögert zu sehen ist.

noltehans · 02.05.2013

AW: wie setze ich eine andere Größe für ein roll over bild?

Hi dane7,

hier noch ein deutsches Tutorial über CSS Sprites.
http://bueltge.de/css-sprites-einfach-erklaert/675/

jama2000 · 02.05.2013

AW: wie setze ich eine andere Größe für ein roll over bild?

Ganz einfach CSS Sprites sind Ausschnitte aus einer einzelnen Bilddatei. In diese Bilddatei werden nun die darzustellenden Bilder aneinander gereiht und als eine Datei gespeichert.Das hat den Vorteil, das der Browser nur eine Datei laden muß, also geht der Seitenaufbau schneller.
In CSS können diese Ausschnitte mit z.B den Befehlen
Background-Origin
Backgrount-Position
u.s.w
geziehlt ausgegeben werden.
Wenn du das dann noch mit der :hover Pseudoklasse kombinierst hast du schon was du willst.