Roll-Over Effekt

  • Ersteller Ersteller RainerCallmund
  • Erstellt am Erstellt am
Status
Für weitere Antworten geschlossen.
R

RainerCallmund

So, ich will eine Tabelle mit allen Tagen im Jahr machen . So an einnigen Tagen sollen Termine seien.Rechts daneben soll ein Info Fenster seien das auch im Normalzustand dort ist, doch wenn man jetzt mit der Maus über die Zahlen geht soll etwas im Infofeld über den Termin stehen.
Meine ersten Ideen waren das man im frameset einen kleinen Bereich auswählt (KA ob das geht) Der im Normal zustand unsichtbar ist ! Wenn man dann mit der Maus Über die Zahlen geht kann man diesen Bereich vieleicht als target nehmen und dort solange man der Maus darauf ist eine Seite zeigen ! Die andere IDee wäre irgendetwas mit sensitiven Bereichen (Nur noch ka wie das gehen sollte) ! Vieleicht fällt jemanden ja ein andere Weg ein oder er weiß wie man meine Ideen umsetzt ! Bitte um Rückmeldung! Bitte Bitte ! Ist wichtig für meine Facharbeit!
 
Das ganze musst du mit JavaScript und MousOver() machen!

Da ich da aber nicht so viele Erfahrungen habe kann ich es dir nicht genau sagen, check h**p://de.selfhtml.org/
 
Wie genau stellst du dir das info fenster vor ?? Nen textfeld ? oder wie hast du dir das gedacht, erläutere mal ,kann dir vll helfen !
 
mach es doch mit innerHTML ;)
hier mal ein beispiel (ist mit den meisten brwosertypen gültig;))
Code: 
<html>
<head>
<script type="text/javascript">
<!--
  var NS4 = (document.layers) ? 1 : 0;
  var IE4 = (document.all) ? 1 : 0;
  var NS6 = (document.getElementById) ? 1 : 0;
  function andererText(where) {
    if(NS4) {
      document.meinText.document.open();
      document.meinText.document.write(where);
      document.meinText.document.close();
    }
    if(IE4) {
      window.document.all.meinText.innerHTML=where;
    }
        if(NS6) {
      document.getElementById("meinText").innerHTML=where;
    }
  }

//-->
</script>
</head>
<body>
<a onmouseover="javascript:andererText('over');" onmouseout="javascript:andererText('out');">hier</a>
<div id="meinText"></div>
</body>
</html>
Musst halt nur das <div id="meinText"> in die gewünchte Tabelle einsetzen oder die td mit id="meinText" kennzeichnen ;)
 
Code: 
<html>
<head>
<title>RollOverTest</title>
</head>
<script language="JavaScript">
function setInfo(text)
{
	document.getElementById("info").innerText = text;
}
</script>
<body>
<table width="100%">
<tr>
<td onMouseOver="setInfo('Info zu diesem text\nOMG');"
 onMouseOut="setInfo('Infos');">
test
</td>
<td onMouseOver="setInfo('Infos zum zweiten text\nLOL^^');"
 onMouseOut="setInfo('Infos');">
2.
</td>
</tr>
</table>
<div id="info">
Infos
</div>
</body>
</html>

ich hoffe mal das ist das, was du suchst

cya dn87p

//edit:
da war aber einer schneller^^
nimm seins, das is besser ;)

cya
 
@BloodVortex
danke ich werd das mal ausprobieren
hoffe es klappt

@$Newbie$
Textfeld wäre auch ok aber ich wollte das eigentlich so machen, dass das da ganz normal (normaler Text) neben oder drunter steht.
Mit onMouseClick wäre das ja nicht das problem, aber ich wollte das mit onMouseOver machen.
 
Naja schätze dass dir das Script von dn87p gefallen würd :9 So hätte ich es dann auch getan denke :) Schade *g*
 
Jo die Lösung von dn87p gefällt mir richtig gut.
Ich werd das morgen mal ausprobieren.
Danke schon mal

Calli
 
Wenn man aber mal schaut sieht man, dass es das selbe ist, nur das dn87p nicht alle Browsertypen unterstützt. Er hat nur NS6 ^^"
Wie er schon sagte ;)

Gruß
BloodVortex
 
@stimmt, aber ich bin leider noch kein Profi und hab deinen code zuerst nicht richtig verstanden (jetzt schon)
werd gucken was meine Lehrer(für die Facharbeit) fordern.

Aber danke nochmal an euch, ich denke das es jetzt klappen wird.

Calli
 
naja, eigentlich gibt es keine großen unterscheide zwischen meinem und BloodVortexs code; bis auf:
1. er hat innerHTML statt innerText genommen; bei ersterem kann man html benutzen bei zweiterem nicht (logisch, oder? :D )
2. sein script ist zu fast allen browsern kompatibel
--> seins ist ja wohl klar besser
der einfachheit halber habe ich meins jedoch so aufgebaut, damit es leicht zu verstehen und nachvollziehbar ist (auch für die weniger geübten).
document.getElementById("meinText").innerHTML=where;
Zum Vergrößern anklicken....
ist fast identisch mit meiner zeile; sein script unterstützt jedoch auch IE4 und NS4, welche auf getElementById("id") nicht klarkommen
gewöhne dir am besten an, diese browserkompatibilität zu gebrauchen, weil du so einfach ein größeres feld von benutzern abdeckst und deine seite für mehr user funktionsfähig ist

//edit:
@ BloodVortex:
mein script unterstützt nicht nur NS6; das script sollte auf:
NS5 aufwärts (NS5,6,7), IE5 aufwärts (IE5,6), Opera6 aufwärts (Opera6,7) laufen
welche version vom firefox nötig ist, weiß ich nicht :/

cya dn87p
 
dn87p schrieb:
mein script unterstützt nicht nur NS6; das script sollte auf:
NS5 aufwärts (NS5,6,7), IE5 aufwärts (IE5,6), Opera6 aufwärts (Opera6,7) laufen
welche version vom firefox nötig ist, weiß ich nicht :/

cya dn87p
Zum Vergrößern anklicken....
schon klar ;)
doch laufen die alle über die selbe Variabel NS6 :D

Gruß
BloodVortex
 
Hi,

<script language="JavaScript">
<!--
function na_change_img_src(name, nsdoc, rpath, preload)
{
var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
if (name == '')
return;
if (img) {
img.altsrc = img.src;
img.src = rpath;
}
}

function na_preload_img()
{
var img_list = na_preload_img.arguments;
if (document.preloadlist == null)
document.preloadlist = new Array();
var top = document.preloadlist.length;
for (var i=0; i < img_list.length-1; i++) {
document.preloadlist[top+i] = new Image;
document.preloadlist[top+i].src = img_list[i+1];
}
}

function na_restore_img_src(name, nsdoc)
{
var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
if (name == '')
return;
if (img && img.altsrc) {
img.src = img.altsrc;
img.altsrc = null;
}
}

// -->
</script>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" OnLoad="na_preload_img(false, 'file:DATEI HIER EINTAGEN');">
<p><a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" OnMouseOver="na_change_img_src('image1', 'document', 'file:DATEI HIER EINTRAGEN', true)"><img border="0" src="file:DATEI HIER EINTRAGEN" width="117" height="27" name="image1"></a></p>


VIEL SPAß

Sammy254
 
Den Effekt kann man auch bei Frontpage einstellen.
 
@sammy254

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" OnLoad="na_preload_img(false, 'file:DATEI HIER EINTAGEN');">
<p><a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" OnMouseOver="na_change_img_src('image1', 'document', 'file:DATEI HIER EINTRAGEN', true)"><img border="0" src="file:DATEI HIER EINTRAGEN" width="117" height="27" name="image1"></a></p>


VIEL SPAß

Sammy254
Zum Vergrößern anklicken....

wollte es einmal testen und kam nicht wirklich zurecht ?
was muß ich da nune genau einsetzen ... 'file:DATEI HIER EINTAGEN'
( was für eine datei ? )
thx4help
 
seit fast 2 monaten keine reaktion des threaderstellers!? *tsstsstss*

~ C L O S E D ~

ceeyaa.mex
 
Status
Für weitere Antworten geschlossen.

Beliebte Schlagwörter

Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
  • cover
  • gruß
  • krombacher1
  • linkvergabe
  • microsoft
  • nicht
  • office
  • super
  • video
  • windows
    • Zurück
    Oben Unten