[JavaScript] mous over efeckt?

RhinoGFX · 16 Februar 2007

PHP:

button1:
<body onLoad="MM_preloadImages('upak.gif')"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','upak.gif',1)"><img src="up.gif" name="Image1" width="28" height="28" border="0"></a>
butto2 :
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>

hi erstma,...
ich habe hier ein problem,.. ich wollte zwei mous over efeckte kombinieren das eine iss halt bei mous over scroll up und der zweite iss halt nur en bildwechseln, aber irgendwie gehts nicht :-(
hatte es ja so versucht

PHP:

<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','upak.gif',1)"><img src="up.gif" name="Image1" width="28" height="28" border="0"></a>

aber des war garnichts hatt wer nen vorschlag? finde jetzt auch cnihts passendes im google

danke schonmal

edit: ach ja so wie sie oben stehen funktionieren beide, also getrennt

so um es besser zu erklären hier mal das ganze script iss halt ne div die über 2 buttons rauf bzw runter gescrollt wird. nur sollen halt diese beiden buttons "eingedrückt werden bei mous over

HTML:

<script type="text/javascript">

/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit https://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container" style="position:relative;width:400px;height:295px;border:0px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:400px;left:0;top:0">')
}
</script><style type="text/css">
<!--
body {
    background-image:url(index_r3_c3.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
body,td,th {
    font-family: Tahoma;
    font-size: x-small;
    color: #000000;
    font-weight: bold;
}
.Stil4 {color: #000000; }
-->
</style>

<ilayer name="nscontainer" width=400 height=295 clip="0,0,175,160">
<layer name="nscontent" width=400 height=295 visibility=hidden>

<center>
  <center>
    <!--INSERT CONTENT HERE-->

      <!--END CONTENT-->
      
      </p>
  </center>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table width="100%"><td><p align="center">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>up                <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="do.gif" border=0></a>down</p></td>
</table>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
</body>
</html>

hoch halt mit up.gif und bei aktiv dann upakt.gif
und down halt des gleiche,. nur ich kriegs nich da rein

Benutzer-42 · 16 Februar 2007

du kannst nur einen der beiden Effekte nutzen

alles andere wäre ja auch Blödsinn

wenn du es zweimal definierst, wird immer nur eine Definition genommen

RhinoGFX · 16 Februar 2007

also DAS es geht,.. also zumindest mehrer events bei mous over habe ich schon gelesen eben beim suchen aber da gehts nicht?sicher

???kackschiss ey

Benutzer-42 · 16 Februar 2007

du kannst den Over, In, Out definieren

aber gleichzeitig zwei Efekte fürs selbe Element?

perlini · 16 Februar 2007

Mach doch den Bildwechsel mit css, dann sollte das Problem gelöst sein. Wie das funktioniert, findest du hier in einem recht aktuellen Thread.

edit: https://www.klamm.de/forum/showthread.php?t=82806

RhinoGFX · 16 Februar 2007

okay , schaut gut aus,.. aber wie kombiniere ich die beiden nun, das es auch geht?

n00ne · 16 Februar 2007

Wie wär's damit:

PHP:

<a href="#" onMouseover="MM_swapImage('Image1','','upak.gif',1);moveup()" onMouseout="MM_swapImgRestore();clearTimeout(moveupvar)"><img src="up.gif" name="Image1" width="28" height="28" border="0"></a>

RhinoGFX · 16 Februar 2007

n00ne schrieb:

Wie wär's damit:

PHP:

<a href="#" onMouseover="MM_swapImage('Image1','','upak.gif',1);moveup()" onMouseout="MM_swapImgRestore();clearTimeout(moveupvar)"><img src="up.gif" name="Image1" width="28" height="28" border="0"></a>

gucke ich sofort

also mit css habe ich es doch so mom prinzib voll hin bekommen, NUR sollten des 2 buttons sein einmal up einmal down und der zeigt bei beiden den up button an -.-

mom mal eben script hier
einamal de
n button an sich

PHP:

 <style>
   a       { display:block;
             background-image:url(up.gif);
             width:28px; height:28px }
   a:hover { background-image:url(upak.gif); }
 </style>

 
  <p><a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"></a></p>

un dim ganzen siehts so aus

PHP:

<script type="text/javascript">



iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5

if (iens6){
document.write('<div id="container" style="position:relative;width:400px;height:295px;border:0px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:400px;left:0;top:0">')
}
</script><style type="text/css">
<!--
body {
    background-image:url(index_r3_c3.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
body,td,th {
    font-family: Tahoma;
    font-size: x-small;
    color: #000000;
    font-weight: bold;
}
-->
</style>
 <style>
   a       { display:block;
             background-image:url(up.gif);
             width:28px; height:28px }
   a:hover { background-image:url(upak.gif); }
 </style>

<ilayer name="nscontainer" width=400 height=295 clip="0,0,175,160">
<layer name="nscontent" width=400 height=295 visibility=hidden>

<center>
  <p>
   <!--INSERT CONTENT HERE-->

 fffffffffff
 f
 f
 f
 f
 f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>f</p>
  <p>ff
    f
    <!--END CONTENT-->
    
                                            </p>
</layer>
</ilayer>

<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>

<table width="100%"><td><p align="center">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"></a>Up</p><a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"></a>down</p></td>
</table>

<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}

function moveup(){
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)

}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
</body>
</html>

so n00ne nun test eich deins ^^
[edit] da tut sich ja nüschts

[JavaScript] mous over efeckt?

RhinoGFX

Well-known member

Benutzer-42

RhinoGFX

Well-known member

Benutzer-42

perlini

Antifaschist

RhinoGFX

Well-known member

n00ne

New member

RhinoGFX

Well-known member