mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 07:43 Benutzername: Passwort: Auto-Login

Thema: javascript - div/bild bei mouseover neben link anzeigen vom 05.02.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> javascript - div/bild bei mouseover neben link anzeigen
Autor Nachricht
gardener
Threadersteller

Dabei seit: 05.02.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 05.02.2007 13:11
Titel

javascript - div/bild bei mouseover neben link anzeigen

Antworten mit Zitat Zum Seitenanfang

hallo,



ich möchte gerne bei mouseover über einen link links neben diesem einen div container oder ein bld anzeigen (blauer kasten), das ganze soll mehrmals geschehen (in einem vertikalen menü).

momentan scheitere ich an den unterschieden zwischen mozilla und ie, eine einfachere lösung wäre schön.
ich möchte wenn möglich nur einen kasten definieren müssen der dann flexibel positioniert wird.

nachtrag: ich habe mittlerweile aufgegeben die position des kastens dynamisch anzupassen und habe für jeden link einen eigenen kasten definiert der dann auf visible gesetzt wird. problem ist jetzt bloß, dass bei schriftgradänderungen die kästen möglicherweise unschön platziert werden, da die positionen ja jetzt fix sind.


folgender code funktioniert im ie, ist allerdings im mozilla nicht brauchbar. problem sind die unterschiedlichen auffassungen der positionen..


der link:

Code:
<div onMouseover="kastenan('kasten1',absTop(this))" onMouseout="kastenaus('kasten1')"
 class="menu" style="position: relative; top:0px; left:0px;">
<a href="ziel.html" class="link">
zweizeiliger<br />
link
</a>
</div>



der kasten:

Code:
<div id="kasten1" class="kasten" style="visibility: hidden; position: absolute; top:; left:50px;"></div> 


css:
.kasten  {
          width:70px; height:10px; background-color:#33ccff;}


javascript:

Code:
function kastenan(knr, toppos)
{
document.getElementById(knr).style.visibility = "visible";
document.getElementById(knr).style.top = toppos;
}
function kastenaus(knr)
{
document.getElementById(knr).style.visibility = "hidden";
}

function absLeft(el) {
     return (el.offsetParent)?
     el.offsetLeft+absLeft(el.offsetParent) : el.offsetLeft;
  }

  function absTop(el) {
     return (el.offsetParent)?
     el.offsetTop+absTop(el.offsetParent) : el.offsetTop;



es wird also die y position des objekts übergeben.


für jeden rat bin ich dankbar,

grüße
g


Zuletzt bearbeitet von gardener am Mo 05.02.2007 13:17, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
BehindTheScenes

Dabei seit: 02.02.2007
Ort: NRW
Alter: -
Geschlecht: Männlich
Verfasst Mi 07.02.2007 14:59
Titel

Antworten mit Zitat Zum Seitenanfang

Man kann das auch nur mit CSS machen.

hier:

Code:
a:link
{
   color: #666666;
   background-position: 100px 100px;
   padding-left: 30px;
}
a:visited
{
   color: #000000;
   background-position: 100px 100px;
   padding-left: 30px;
}
a:hover
{
   color: #CCCCCC;
   background: url('new.jpg') no-repeat 0px 0px;
   padding-left: 30px;
}
a:active
{
   color: #000000;
   background-position: 100px 100px;
   padding-left: 30px;
}


MfG
  View user's profile Private Nachricht senden
Anzeige
Anzeige
 
Ähnliche Themen [Flash] bild anzeigen bei mouseover
Javascript mouseover Bild überblendung?
Bild anzeigen und verstecken sowie ändern mit einem Link
[PHP] Letztes Bild suchen und dann Link nicht mehr anzeigen?
Bildaustausch mit JavaScript - getauschtes Bild mit Link
Mouseover mit Link
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.