Bei "Roll-over" Fenster einblenden

F

Flou

0
Wie stell ich so etwas an wie z.b. auf der homepage von www.kontent.de zu sehen ist, wenn man über eine grafik mit der maus rollt das eine fenster eingeblendet wird, und das ohne ladezeit!
 
Das ist sogar mal simpel. Es handelt sich um Layer. Die werden zur Zeit allerdings nciht von allen brwosern unterstützt.:

Mein Layer-Bsp zeigts:

Code: 
<script language=\"Javascript\">
<!--
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
NS6 = (document.getElementById) ? 1 : 0;

function show(idname,action) {
 if(!action) {
  if(IE4) document.all(idname).style.visibility = \"hidden\";
  if(NS4) document.layers[idname].visibility = \"hide\";
  if(NS6) document.getElementById(idname).style.visibility = \"hidden\";
 }
 else {
  if(IE4) document.all(idname).style.visibility = \"visible\";
  if(NS4) document.layers[idname].visibility = \"show\";
  if(NS6) document.getElementById(idname).style.visibility = \"visible\";
 }
}

//-->
</script>
      <table border=\"0\" cellpadding=\"2\" cellspacing=\"1\" width=\"95%\">
        <tr>
          <td width=\"50%\"><a href=\"#\" onMouseOver=\"javascript:show('info',true);\">Kurzinfos</a></td>
          <td width=\"50%\"><a href=\"#\" onMouseOver=\"javascript:show('friends',true);\" onMouseOut=\"javascript:show('friends',false);\">Freunde</a></td>
        </tr>
      </table>

<DIV ID=\"info\" STYLE=\"position:absolute; left:10;  top:50;  z-index:1; visibility: hidden\">
<table cellpadding=2 cellspacing=1 border=0 width=\"380\" bgcolor=\"black\" style=\"filter:Alpha(opacity=90, finishopacity=90, style=2)\">
  <tr bgcolor=\"white\">
    <td colspan=2>0000</td>
  </tr>
  <tr>
    <td bgcolor=\"yellow\" width=\"40%\">Name:</td>
    <td bgcolor=\"white\" width=\"60%\">Henning Karl Bopp</td>
  </tr>
  <tr>
    <td bgcolor=\"yellow\" width=\"40%\">Geboren:</td>
    <td bgcolor=\"white\" width=\"60%\">#</td>
  </tr>
  <tr>
    <td bgcolor=\"yellow\" width=\"40%\">Interessen:</td>
    <td bgcolor=\"white\" width=\"60%\">#</td>
  </tr>
  <tr bgcolor=\"white\">
    <td colspan=2 align=\"center\"><a href=\"javascript:show('info',false);\">schließen...</a></td>
  </tr>
</table>
</DIV>

<DIV ID=\"friends\" STYLE=\"position:absolute; left:10;  top:50;  z-index:1; visibility: hidden\">
<table cellpadding=2 cellspacing=1 border=0 width=\"380\" bgcolor=\"black\" style=\"filter:Alpha(opacity=90, finishopacity=90, style=2)\">
  <tr bgcolor=\"white\">
    <td colspan=2>0000</td>
  </tr>
  <tr>
    <td bgcolor=\"yellow\" width=\"40%\">0000</td>
    <td bgcolor=\"white\" width=\"60%\">000</td>
  </tr>
  <tr>
    <td bgcolor=\"yellow\" width=\"40%\">0000</td>
    <td bgcolor=\"white\" width=\"60%\"></td>
  </tr>
</table>
</DIV>

Das Freunde-Feld schließt auch wieder bei verlassen des links
 
Hab das ganze jetzt so gestaltet, dass es beim roll-over bei einem bild angezeigt wird.
Bis dahin läuft alles perfekt.
Nun möchte ich aber das, dass eingeblendete Fenster unterhalb des jeweiligen Bildes (den effekt hab ich bei mehreren Bildern eingefügt) erscheint.
Wie muss ich dazu diesen
Code: 
DIV ID=\"info\" STYLE=\"position:absolute; left:10;  top:50;  z-index:1; visibility: hidden\">
abändern?
 
Original von Odin
Hab das ganze jetzt so gestaltet, dass es beim roll-over bei einem bild angezeigt wird.
Bis dahin läuft alles perfekt.
Nun möchte ich aber das, dass eingeblendete Fenster unterhalb des jeweiligen Bildes (den effekt hab ich bei mehreren Bildern eingefügt) erscheint.
Wie muss ich dazu diesen
Code: 
DIV ID=\"info\" STYLE=\"position:absolute; left:10;  top:50;  z-index:1; visibility: hidden\">
abändern?
Zum Vergrößern anklicken....
Volltreffer. Die Position muss in pixeln vom linken rand der seite (left: 10) und dem oberrad der seite ausgehen. Problem dabei ist natürlich, dass die bilder schuterschiedliche höhen / breitengrade haben, wenn sie in anderen Auflösungen betrachtet werden. beachte dies!
 
Original von boppy
Problem dabei ist natürlich, dass die bilder uterschiedliche höhen / breitengrade haben, wenn sie in anderen Auflösungen betrachtet werden. beachte dies!
Zum Vergrößern anklicken....
schwachsinn. solange die angaben nicht in prozent gemacht werden ändert sich da garnichts. 10 pixel sind 10 pixel ...
 
Man stelle sich folgendes vor: jemand setzt 10 sumbnails in eine reihe. Auf 1280*1024 und 1024*768 geht das auch klar. aber bei 800*600 wird thumbnail 9 und 10 in die nächste reihe verfrachtet... und nun!!?
 
das ist dann aber die folge von schlechter html-formatierung ...
normalerweise sollte man thumbnails ja in eine tabelle mit absoluten werten setzen. (ausser der effekt ist erwünscht)
 
Könnte man den source nicht so ändern das die einblendung immer in irgendeinen eck des browsers erscheint, die pixel geben immer den abstand zum bild an...
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben