mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 19:13 Benutzername: Passwort: Auto-Login

Thema: Bildwechsel bei onmouseover vom 26.10.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Bildwechsel bei onmouseover
Autor Nachricht
mauer-design
Threadersteller

Dabei seit: 19.04.2007
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Fr 26.10.2007 10:19
Titel

Bildwechsel bei onmouseover

Antworten mit Zitat Zum Seitenanfang

Servus,

ich habe ein "Script", das einzelne div visible und hidden setzt. Mein Problme ist nun aber, dass die Divs immer an der gleichen Stelle erscheinen sollen. bisher tun Sie dies nur untereinander. Position abolute kann ich wegen dem Aufbau der Seite nicht einsetzen. Also zur Verständnis: Jedes visible gesetze div soll in der oben linke ecke des gelben Kastens angezeigt werden. Hier mein aktuelles Script:

Code:
   <head>

      <style>
      #imagerahmen { width: 200px; height: 200px; background-color: yellow;}
      #image1 {position: relative; top: 0; left: 0; visibility: hidden;}
      #image2 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 2;}
      #image3 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 3;}
      #image4 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 4;}
      #image5 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 5;}
      #image6 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 6;}
      #image7 {position: relative; top: 0; left: 0; visibility: hidden; z-index: 7;}
      
      </style>
   </head>

   <body>
      <a href="#" onmouseover=javascript:document.getElementById('image1').style.visibility='visible' onmouseout=javascript:document.getElementById('image1').style.visibility='hidden'>Bild 1 anzeigen</a>
      <a href="#" onmouseover=javascript:document.getElementById('image2').style.visibility='visible' onmouseout=javascript:document.getElementById('image2').style.visibility='hidden'>Bild 2 anzeigen</a>
      <a href="#" onmouseover=javascript:document.getElementById('image3').style.visibility='visible' onmouseout=javascript:document.getElementById('image3').style.visibility='hidden'>Bild 3 anzeigen</a>
      <a href="#" onmouseover=javascript:document.getElementById('image4').style.visibility='visible' onmouseout=javascript:document.getElementById('image4').style.visibility='hidden'>Bild 4 anzeigen</a>
      <a href="#" onmouseover=javascript:document.getElementById('image5').style.visibility='visible' onmouseout=javascript:document.getElementById('image5').style.visibility='hidden'>Bild 5 anzeigen</a>
      <a href="#" onmouseover=javascript:document.getElementById('image6').style.visibility='visible' onmouseout=javascript:document.getElementById('image6').style.visibility='hidden'>Bild 6 anzeigen</a>
      <a href="#" onmouseover=javascript:document.getElementById('image7').style.visibility='visible' onmouseout=javascript:document.getElementById('image7').style.visibility='hidden'>Bild 7 anzeigen</a>
   <p><br />
   </p>
   <div id="imagerahmen">
      <div id="image1">Image 1</div>
      <div id="image2">Image 2</div>
      <div id="image3">Image 3</div>
      <div id="image4">Image 4</div>
      <div id="image5">Image 5</div>
      <div id="image6">Image 6</div>
      <div id="image7">Image 7</div>
      </div>
   </body>

</html>


hat einer ne Lösung?


Zuletzt bearbeitet von mauer-design am Fr 26.10.2007 10:20, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Fido67
Account gelöscht


Ort: -

Verfasst Fr 26.10.2007 10:35
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo,
du könntest das mit margin machen:

Code:
#image2 {position: relative; top: 0; left: 0; margin-top:-200px; visibility: hidden;}


Zuletzt bearbeitet von am Fr 26.10.2007 10:38, insgesamt 2-mal bearbeitet
 
Anzeige
Anzeige
mauer-design
Threadersteller

Dabei seit: 19.04.2007
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Fr 26.10.2007 15:13
Titel

Antworten mit Zitat Zum Seitenanfang

Das din ist dann aber, dass bei relativer positionierung der content ja nach oben verlagert wird, aber dennoch das div sein platz an der ursprünlichen postion behält, also es sieht perfekt aus, aber der scrolbalken rechts ist ebend so lang, als wären die divs untereinander. kann man das irgendie unterdrücken?
  View user's profile Private Nachricht senden
Fido67
Account gelöscht


Ort: -

Verfasst Fr 26.10.2007 15:26
Titel

Antworten mit Zitat Zum Seitenanfang

Da die divs ja in einem container sind kannst du die positionangabe auch weglassen.
So gibts keunen scrollbalken:

Code:
      <style>
      #imagerahmen { width: 200px; height: 200px; background-color: yellow;}
      #image1 {width: 200px; height: 200px; top: 0; left: 0;  visibility: hidden;}
      #image2 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 2;}
      #image3 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 3;}
      #image4 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 4;}
      #image5 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 5;}
      #image6 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 6;}
      #image7 {width: 200px; height: 200px; top: 0; left: 0; margin-top:-200px; visibility: hidden; z-index: 7;}
     
      </style>
 
 
Ähnliche Themen Bildwechsel durch onMouseOver
onmouseover
[php] OnMouseover Effekt mit php
text bei onmouseover
onmouseover Problem
onMouseOver per HyperLink
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


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.