Avatar billede milo Nybegynder
14. februar 2001 - 11:20 Der er 29 kommentarer og
1 løsning

Avanceret mouseover?

hej...synes I skal starte med at se på
http://www.warhammer.dk/whatever/

Den der graf bar med ledig hd plads...det skal være sådan, at hvis man fx kører musen over feltet ved 50%, så bliver det felt grønt, + de felter nedenunder, altså 0-40%
Når man så trykker skal det fastlåses så man kan gå videre til næste bar...

Et alm. mouseover script kan ikke bruges, da det jo er et billede, der skal have flere links, og så skifte billedet ud med et andet ved hvert af de links...

Det nytter heller ikke noget at lave hvert felt som hvert sit billede..for så vil de 10 andre billeder jo blive ståenede når et blivet udskifter med et andet...

Har tænke på om man måske ka bruge imagemapping kædet sammen med mouseover? men hvad så med det der med at når man trykker låser det på det valgte felt?

Tror egentlig ikke det er så kompliceret..skal bare have hjælp til hvordan det skal løses...
Avatar billede milo Nybegynder
14. februar 2001 - 11:21 #1
desuden kan I se billederne til grafen her
http://www.warhammer.dk/whatever/billeder/graf/
Avatar billede mora Nybegynder
14. februar 2001 - 11:31 #2
Lav en while funktion, og kald så denne via linksne.

Mouseover: farv(procent)
Onclick: Funktion der fastlåser en variabel, så farv bliver ignoreret.

Kan godt lave noget kilde, meen ikke lige til 100´:-)

~MORA~
Avatar billede milo Nybegynder
14. februar 2001 - 11:32 #3
ja det der fattede jeg ik meget af *G*

hvor meget er mere vil du ha ? :)
Avatar billede kasseper Nybegynder
14. februar 2001 - 11:35 #4
Du kan da godt bruge imagemapping, og mouseover, OG onClick, når du så klikke så skifter billedet.....?
Avatar billede milo Nybegynder
14. februar 2001 - 11:37 #5
kasse>>> ja det tror jeg også..men ka ik helt finde hove dog hale i det..har rodet med det du siger der..man har problemer med at få kombineret forskellige scripts og sån...
Avatar billede redbastard Nybegynder
14. februar 2001 - 11:38 #6
jeg ved ikke helt hvordan koden skal se ud,men jeg ved at man i Fireworks kan bruge swap image OnMouseClick og fravælge restore image OnMouseOut
vha. slices i Fireworks
Avatar billede milo Nybegynder
14. februar 2001 - 11:40 #7
red>>gider du ik prøve at lave et eksempel i fireworks så? og så copy/paste koden her...
Avatar billede kasseper Nybegynder
14. februar 2001 - 11:41 #8
Kan du ikke paste et af dine forsøg ind her, så kan vi nok rette det til så det virker, det skulle nok kunne lade sig gøre....
Avatar billede redbastard Nybegynder
14. februar 2001 - 11:41 #9
jo det kan jeg da godt prøve
Avatar billede milo Nybegynder
14. februar 2001 - 11:45 #10
kasse>>har slettet mine forsøg fordi de ikke virkede...sorry
Avatar billede kasseper Nybegynder
14. februar 2001 - 11:48 #11
OK, så må vi se om ikke redbastard, kan diske op med noget, ellers skal jeg nok lave et eksempel.
Avatar billede milo Nybegynder
14. februar 2001 - 11:48 #12
oki doki
Avatar billede redbastard Nybegynder
14. februar 2001 - 11:52 #13
<html>
<head>
<title>jan.gif</title>
<meta http-equiv=\"Content-Type\" content=\"text/html;\">
<!-- Fireworks 4.0  Dreamweaver 4.0 target.  Created Wed Feb 14 11:52:15 GMT+0100 (Vest-Europa (normaltid)) 2001-->
<script language=\"JavaScript\">
<!--
function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(\"?\"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  if (a[i].indexOf(\"#\")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>
</head>
<body bgcolor=\"#ffffff\" onLoad=\"MM_preloadImages(\'5.gif\');\">
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"200\">
<!-- fwtable fwsrc=\"jan.png\" fwbase=\"jan.gif\" fwstyle=\"Dreamweaver\" fwdocid = \"742308039\" fwnested=\"0\" -->
  <tr>
  <td><img src=\"spacer.gif\" width=\"52\" height=\"1\" border=\"0\"></td>
  <td><img src=\"spacer.gif\" width=\"80\" height=\"1\" border=\"0\"></td>
  <td><img src=\"spacer.gif\" width=\"68\" height=\"1\" border=\"0\"></td>
  <td><img src=\"spacer.gif\" width=\"1\" height=\"1\" border=\"0\"></td>
  </tr>

  <tr>
  <td colspan=\"3\"><img name=\"jan_r1_c1\" src=\"jan_r1_c1.gif\" width=\"200\" height=\"50\" border=\"0\"></td>
  <td><img src=\"spacer.gif\" width=\"1\" height=\"50\" border=\"0\"></td>
  </tr>
  <tr>
  <td rowspan=\"2\"><img name=\"jan_r2_c1\" src=\"jan_r2_c1.gif\" width=\"52\" height=\"250\" border=\"0\"></td>
  <td><a href=\"#\" onClick=\"MM_swapImage(\'jan_r2_c2\',\'\',\'5.gif\',1);\" ><img name=\"jan_r2_c2\" src=\"jan_r2_c2.gif\" width=\"80\" height=\"233\" border=\"0\"></a></td>
  <td rowspan=\"2\"><img name=\"jan_r2_c3\" src=\"jan_r2_c3.gif\" width=\"68\" height=\"250\" border=\"0\"></td>
  <td><img src=\"spacer.gif\" width=\"1\" height=\"233\" border=\"0\"></td>
  </tr>
  <tr>
  <td><img name=\"jan_r3_c2\" src=\"jan_r3_c2.gif\" width=\"80\" height=\"17\" border=\"0\"></td>
  <td><img src=\"spacer.gif\" width=\"1\" height=\"17\" border=\"0\"></td>
  </tr>
</table>
</body>
</html>
Avatar billede redbastard Nybegynder
14. februar 2001 - 11:54 #14
jeg kopierede altså bare hele koden

jeg ved ikke rigtigt hvor meget af det du skal bruge
Avatar billede milo Nybegynder
14. februar 2001 - 11:56 #15
red>>>gør jeg heller ikke *G*

50 points til en der bare vil dele det op til noget overskueligt ! og cutte unødigt væk...jeg har ikke rigtig selv tid til at se på det nu...
Avatar billede redbastard Nybegynder
14. februar 2001 - 11:59 #16
jeg så lige at der også skal være en funktion når du kører musen hen over feltet
jeg har kun lavet en når man klikker
Avatar billede milo Nybegynder
14. februar 2001 - 12:10 #17
red>>så lav den mouseover funktion også ? :)
Avatar billede jakoba Nybegynder
14. februar 2001 - 12:19 #18
Det bedste vil være at lave små billeder for hvert felt. Så skal der ikke loades mere end 3 små billeder (hvid,grøn,rød) der bruges igen og igen.

du kan sagtens bytte mange billeder på een gang. Hvis der kommer mouseover på billed nr i i kolonne n kunne det handteres med:

for (var i=0; i<10; i++) {
    if ( i < aktivt_Img )
        document.images[\"col\"+n+\"img\"+i].src = \"hvid.jpg\"
    else
        document.images[\"col\"+n+\"img\"+i].src = \"grøn.jpg\";

mvh JakobA
Avatar billede redbastard Nybegynder
14. februar 2001 - 12:39 #19
jeg har nu prøvet på dette i en halv time og nu gidder jeg ikke mere
jeg lavede en rollover når musen var hen over billedet
derefter tilføjede jeg endnu en behaviour (swap image) og fjernede fluebenet  i restore image OnMouseOut
og det virkede ikke
så jeg foreslår ligesom jakoba at du på en eller anden måde laver 2 eller flere billeder
der bliver sikkert lidt ekstra arbejde men det virker sikkert bedre end det jeg sad og prøvede på at lave
Avatar billede milo Nybegynder
14. februar 2001 - 12:59 #20
jokoba>> der er godt nok 11 billeder...loadtiden er ligegyldig da det kun skal gøre over lan...

Kan man også godt lave, så den ved at hvis musen er over felt 5, skal den også skifte billede på felt 1,2,3 og 4...og hvis musen er over fx felt 3, skal bilede 1 og 2 også skifte?

Hvis ja...hvor finder jeg noget brugbart kode...ingen grund til at omskrive hvis der allerede findes noget...
Avatar billede milo Nybegynder
14. februar 2001 - 13:00 #21
jokoba>>og husk onclick skal låse fast... :)
Avatar billede jakoba Nybegynder
14. februar 2001 - 14:37 #22
Søjlen bevæger sig ganske pænt. Ok

<html>
<head>

<script language=\'javascript\'>

var denGronne = new Image();    // prefetch grøn indikationsbillede
    denGronne.src = \"gron.gif\"
var denRode = new Image();      // var der også brug for et rødt?
    denRode.src = \"rod.gif\"
                                // \"hvid.gif\" loades ved sideload

      // husker hvor der er klikket
var klikDone = new Array( false, false, false, false ); // een per kolonne.

function klik( col ) {
  klikDone[col] = true;
}; //end klik( number )

      // lader en grøn søjle følge mousepointer
function musOver ( pic, col, rw ) {  // rw SKAL være 0..9
  var picIdx = 0;
  if ( !klikDone[col] ) {
    while ( pic != document.images[picIdx] ) picIdx++;
    for (var i=picIdx-rw; i<picIdx; i++) document.images[i].src = \"hvid.gif\";
    for (var i=picIdx; i<=picIdx-rw+9; i++) document.images[i].src = \"gron.gif\";
  }
}; //end musOver ( Image, number, number )

</script>

</head>
<body>

<!-- hver < img border=\"0\" src=\"billeder/graf/tom.gif\" width=\"80\" height=\"233\"

usemap=\"#FPMap0\" name=\"\"image1\"> -->

udskiftes med:

<table border=1 width=80>
<tr><td>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,0);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,1);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,2);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,3);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,4);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,5);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,6);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,7);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,8);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,9);\"></td>
</tr>
</table>

<p>Husk at rette kolonnenummeret ( col parameter ) for de andre billeder.

</body>
</html>
Avatar billede milo Nybegynder
14. februar 2001 - 15:26 #23
www.warhammer.dk/whatever

se nu... :) det er delvis perfekt. Jeg kan ikke lige overskue hvordan jeg får den til at lave så i det 2 øverste felter kommer det røde billede frem i stedet for det grønne.

En ting mere, ved godt jeg ik bad om det, du skal nok få 50 points mere (i alt 150, enige?) hvis du oxo gider lave, så hvis man trykker, er baren ikke frosset mere. Lidt surt at skulle udfylde hele formularen igen, hvis man har kommet til at trykke det forkerte sted og er nødt til at reloade *G*

Men ellers er det helt kanon!
Avatar billede jakoba Nybegynder
14. februar 2001 - 15:50 #24
ok. Opdagede lige du har 11 felter i dine søjler. sorry, du kan selv komme det 11\'te billede på.

<html>
<head>

<script language=\'javascript\'>

var denGronne = new Image();    // prefetch grøn indikationsbillede
    denGronne.src = \"gron.gif\"
var denRode = new Image();      // var der også brug for et rødt?
    denRode.src = \"rod.gif\"
                                // \"hvid.gif\" loades ved sideload

      // husker hvor der er klikket
var klikDone = new Array( false, false, false, false ); // een per kolonne.

function klik( col ) {
  klikDone[col] = !klikDone[col];
}; //end klik( number )

      // lader en grøn søjle følge mousepointer
function musOver ( pic, col, rw ) {  // rw SKAL være 0..9
  var picIdx = 0;
  if ( !klikDone[col] ) {
    while ( pic != document.images[picIdx] ) picIdx++;
    var begy =picIdx-rw;
    var slut =picIdx-rw+10;
    for (var i=0; i<10; i++)
          if ( i<rw ) document.images[begy+i].src = \"hvid.gif\"
      else if ( i>=2 ) document.images[begy+i].src = \"gron.gif\"
      else            document.images[begy+i].src = \"rod.gif\";
  }
}; //end musOver ( Image, number, number )

</script>

</head>
<body>

<!-- hver < img border=\"0\" src=\"billeder/graf/tom.gif\" width=\"80\" height=\"233\"

usemap=\"#FPMap0\" name=\"\"image1\"> -->

udskiftes med:

<table border=1 width=80>
<tr><td>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,0);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,1);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,2);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,3);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,4);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,5);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,6);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,7);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,8);\"><br>
  <img src=\"hvid.gif\" width=80 height=23
          onclick=\"klik(0);\" onmouseover=\"musOver(this,0,9);\"></td>
</tr>
</table>

<p>Husk at rette kolonnenummeret ( col parameter ) for de andre billeder.

</body>
</html>
Avatar billede milo Nybegynder
14. februar 2001 - 16:14 #25
når jeg putter et xtra billede ind... (så jeg har fra 0,10 i stedet for 0,9 - så virker det billede ikke... hvorfor? man skal vel fortælle den i head delen at der er et billede mere ik ?
Avatar billede milo Nybegynder
14. februar 2001 - 16:26 #26
accepterer ligeså snart du lige har fortalt hvon det virker når jeg ska ha det billede ind *G*
Avatar billede milo Nybegynder
14. februar 2001 - 16:32 #27
har fundet ud af det!

mange tak for hjælpen... :)
Avatar billede milo Nybegynder
14. februar 2001 - 16:58 #28
pis...jakoba
se www.warhammer.dk/whatever igen...*S* der er en bug i...(eller oxo er det bare mig)

Det er kun bar 1 jeg kan låse...og hvis jeg låser i bar 1, låser den alle 4 søjler...*S*

har du icq?
så add mig tak *S* 43113832
Avatar billede jakoba Nybegynder
14. februar 2001 - 17:48 #29
i musOver(this,0,9) funktionen er anden parameter også colonne parameter.
og skal også ændres til 1, 2 og 3 for de andre kolonner.

          onclick=\"klik(3);\" onmouseover=\"musOver(this,3,8);\"><br>
for kald i kolonne 3
Avatar billede milo Nybegynder
15. februar 2001 - 08:14 #30
kanon :) - havde kun ændret \"klik()\" værdien... :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester