Toon posts:

[JavaScript] Rollover Button wil niet werken *

Pagina: 1
Acties:

donderdag 12 augustus 2004 10:54

Acties:

Verwijderd

Topicstarter
Ben een website aan het maken en wil een rollover voor mijn buttons. Aangezien ik niet echt een
java-kenner ben heb ik zowat zitten prutsen: heb in photoshop het design gedaan en daar via
imageready mijn rollovers vastgelegd en dan save optimized. Dan savet photoshop
automatisch ook een klein HTML bestand. Daarin werkten de rollovers en toen ik dan het java
scriptje van die broncode overnam naar mijn webpage, werkte het niet meer. Ik heb geen
idee waarom het fout gaat.

De buttons staan er, de link werkt, maar de rollover verschijnt niet.

Heb allerlei zaken nagekeken zoals directory, paar stukjes code die mij onlogisch leken
(eigenlijk niet nodig, want die code werkt... toch in de photoshop webpage).
Nuja,
mss dat jullie iets kunnen vinden wat niet klopt.

Java:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
    if (document.images) {
        rslt = new Image();
        rslt.src = arg;
        return rslt;
    }
}

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        nav_bar_left_nav_bar_home_over = newImage("images/nav-bar-left-nav-bar-home_o.gif");
        nav_bar_home_over = newImage("images/nav-bar-home-over.gif");
        nav_bar_news_over = newImage("images/nav-bar-news-over.gif");
        nav_bar_art_over = newImage("images/nav-bar-art-over.gif");
        nav_bar_it_over = newImage("images/nav-bar-it-over.gif");
        nav_bar_chillout_over = newImage("images/nav-bar-chillout-over.gif");
        nav_bar_contact_over = newImage("images/nav-bar-contact-over.gif");
        preloadFlag = true;
    }
}

// -->
</SCRIPT>


HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<TD>
 <A HREF="#"
  ONMOUSEOVER="changeImages('nav_bar_left', images/nav-bar-left-nav-bar-home_o.gif', 'nav_bar_home', 'images/nav-bar-home-over.gif'); return true;"
  ONMOUSEOUT="changeImages('nav_bar_left', 'images/nav-bar-left.gif', 'nav_bar_home', 'images/nav-bar-home.gif'); return true;">
  [img]"images/nav-bar-home.gif"[/img]</A></TD>

<TD>
 <A HREF="#"
  ONMOUSEOVER="changeImages('nav_bar_news', 'images/nav-bar-news-over.gif'); return true;"
  ONMOUSEOUT="changeImages('nav_bar_news', 'images/nav-bar-news.gif'); return true;">
  [img]"images/nav-bar-news.gif"[/img]</A></TD>

<TD>
 <A HREF="#"
  ONMOUSEOVER="changeImages('nav_bar_art', 'images/nav-bar-art-over.gif'); return true;"
  ONMOUSEOUT="changeImages('nav_bar_art', 'images/nav-bar-art.gif'); return true;">
  [img]"images/nav-bar-art.gif"[/img]</A></TD>

<TD>
 <A HREF="#"
  ONMOUSEOVER="changeImages('nav_bar_it', 'images/nav-bar-it-over.gif'); return true;"
  ONMOUSEOUT="changeImages('nav_bar_it', 'images/nav-bar-it.gif'); return true;">
  [img]"images/nav-bar-it.gif"[/img]</A></TD>

<TD>
 <A HREF="#"
  ONMOUSEOVER="changeImages('nav_bar_chillout', 'images/nav-bar-chillout-over.gif'); return true;"
  ONMOUSEOUT="changeImages('nav_bar_chillout', 'images/nav-bar-chillout.gif'); return true;">
  [img]"images/nav-bar-chillout.gif"[/img]</A></TD>

<TD>
 <A HREF="#"
  ONMOUSEOVER="changeImages('nav_bar_contact', 'images/nav-bar-contact-over.gif'); return true;"
  ONMOUSEOUT="changeImages('nav_bar_contact', 'images/nav-bar-contact.gif'); return true;">
  [img]"images/nav-bar-contact.gif"[/img]</A></TD>


Black Box

[Off Topic]
Sorry voor die vorige post .oisyn, was nogal gehaast en had een superquickstart topic
nodig. /me had nu meer tijd en heeft er zijn werk van gemaakt B)
[/Off Topic]

Edit: Geprobeerd de lay out niet te verneuken...

[ Voor 18% gewijzigd door Verwijderd op 12-08-2004 10:59 ]

donderdag 12 augustus 2004 10:57

Acties:
  • gorgi_19
  • Registratie: Mei 2002
  • Nu online

gorgi_19

Kruimeltjes zijn weer op :9

Java != Javascript. :) Jij hebt een Javascript probleem..

Deze horen thuis in Webdesign & Graphics, vandaar dat ik hem even daarheen gooi. :)

Digitaal onderwijsmateriaal, leermateriaal voor hbo

donderdag 12 augustus 2004 11:07

Acties:

Verwijderd

Topicstarter
Last dat jullie met mij hebbe ... *zucht*
Sorry meneer mod _/-\o_

donderdag 12 augustus 2004 11:11

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Hoe ziet die complete pagina er uit dan? Heb je een voorbeeld online staan?

donderdag 12 augustus 2004 11:16

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 13:28

crisp

Devver

Pixelated

ik zie op regel 3 al een vergeten quote

Intentionally left blank

donderdag 12 augustus 2004 11:23

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 12-05 22:23

curry684

left part of the evil twins

Waarom doe je zo moeilijk met Javascript? :?

* curry684 wijst subtiel naast Listamatic, over hoe je dit met een klein stukje CSS oplost.

Professionele website nodig?

donderdag 12 augustus 2004 11:34

Acties:

Verwijderd

Topicstarter
André schreef op 12 augustus 2004 @ 11:11:
Hoe ziet die complete pagina er uit dan? Heb je een voorbeeld online staan?
Hier is hij zowat compleet tot hiertoe.

Die quote is een foutje van het copy-pasten waarschijnlijk.

donderdag 12 augustus 2004 11:36

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Verwijderd schreef op 12 augustus 2004 @ 11:34:
[...]

Hier is hij zowat compleet tot hiertoe.

Die quote is een foutje van het copy-pasten waarschijnlijk.
Dit klopt niet helemaal he:

code:
1

nav_bar_home_over = newImage("D:\Satellite\Roll over\images/nav-bar-home-over.gif");

donderdag 12 augustus 2004 11:46

Acties:

Verwijderd

Topicstarter
Ik heb geen idee... :? Dat stuk komt regelrecht gekopieerd uit dat photoshop voorbeeld.
curry684 schreef op 12 augustus 2004 @ 11:23:
Waarom doe je zo moeilijk met Javascript? :?
Mja, ik dacht: flash of javascript, en aangezien photoshop het automatisch me een JS oplost vond ik dat handiger...
/me neemt een kijkje naar dat stukje CSS

donderdag 12 augustus 2004 11:48

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Verwijderd schreef op 12 augustus 2004 @ 11:46:
Ik heb geen idee... :?
Wat dacht je ervan om alle lokale paden uit je script te halen en ze op deze manier er in te zetten:

code:
1

nav_bar_home_over = newImage("images/nav-bar-home-over.gif");


Doe dit ook voor de images en andere dingen waar paden in voorkomen, dat "D:\Satellite\Roll over\" moet overal uit. Ook staat er een spatie in je url, die kun je beter vermijden.

[ Voor 25% gewijzigd door André op 12-08-2004 11:50 ]

donderdag 12 augustus 2004 12:20

Acties:

Verwijderd

Topicstarter
Dat was dom :+ Lijkt wel wet van murphy hier, niets gaat (van de eerste keer) goed.

Link en sources verbeterd

donderdag 12 augustus 2004 12:27

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 12-05 22:23

curry684

left part of the evil twins

Verwijderd schreef op 12 augustus 2004 @ 12:20:
Dat was dom :+ Lijkt wel wet van murphy hier, niets gaat (van de eerste keer) goed.

Link en sources verbeterd
En dan nog is CSS een tig keer betere oplossing :)

Professionele website nodig?

donderdag 12 augustus 2004 12:39

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Maak van

code:
1

document[changeImages.arguments[i]].src = changeImages.arguments[i+1];


eens

code:
1

document.images[changeImages.arguments[i]].src = changeImages.arguments[i+1].src;


En zoals curry al zegt, het kan makkelijker.

donderdag 12 augustus 2004 12:40

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 13:28

crisp

Devver

Pixelated

ik denk dat je vergeet onload nog even preloadImages() aan te roepen :)

Intentionally left blank

donderdag 12 augustus 2004 13:55

Acties:

Verwijderd

Topicstarter
André schreef op 12 augustus 2004 @ 12:39:
Maak van
*knip*
eens
*knip*
Gebeurd
crisp schreef op 12 augustus 2004 @ 12:40:
ik denk dat je vergeet onload nog even preloadImages() aan te roepen :)
Sla me dood, ik weet niet wat je bedoelt... (starttopic; lees="absoluut geen java(script)-kenner")

Tot zover de website met java

En ben ook met dat CSS stukje begonnen. Alleen, kan iemand me zeggen hoe ik op deze plaats:
Cascading Stylesheet:
1

background: transparent url(nav-bar-home.gif) left center no-repeat;

een lijst van images neer kan zetten? Met een ";" ofzo?

Zow :p nu hebbik wat voor javascript en voor CSS liefhebbers, geen discriminatie hier.
/me moraalridder

donderdag 12 augustus 2004 13:58

Acties:
  • curry684
  • Registratie: Juni 2000
  • Laatst online: 12-05 22:23

curry684

left part of the evil twins

Je zet er geen meerdere images in :)

Je definieert in een div een unordered list van menu elementen, en die geeft je vervolgens allemaal een afzonderlijke a:link en a:hover background-image :)

Begin hier eens.

Professionele website nodig?

donderdag 12 augustus 2004 14:12

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 13:28

crisp

Devver

Pixelated

Verwijderd schreef op 12 augustus 2004 @ 13:55:
[...]
Sla me dood, ik weet niet wat je bedoelt... (starttopic; lees="absoluut geen java(script)-kenner")
[...]
Open het photoshop HTML bestand en zoek daarin op "onload" en/of "preloadImages()"

Dat je geen javascript kent is geen excuus - dan ga je het maar leren ;)

Intentionally left blank

donderdag 12 augustus 2004 14:14

Acties:

Verwijderd

Topicstarter
Bedoel je nu dat ik voor elke link een ander CSS moet maken zoals ik heb gedaan?

Ben daar beginnen lezen, maar wordt er niet wijzer uit...

donderdag 12 augustus 2004 14:18

Acties:

Verwijderd

Topicstarter
Java:
1
2
3
4
5
6
7
8
9
10
11
12
13

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        nav_bar_left_nav_bar_home_over = newImage("nav-bar-left-nav-bar-home_o.gif");
        nav_bar_home_over = newImage("nav-bar-home-over.gif");
        nav_bar_news_over = newImage("nav-bar-news-over.gif");
        nav_bar_art_over = newImage("nav-bar-art-over.gif");
        nav_bar_it_over = newImage("nav-bar-it-over.gif");
        nav_bar_chillout_over = newImage("nav-bar-chillout-over.gif");
        nav_bar_contact_over = newImage("nav-bar-contact-over.gif");
        preloadFlag = true;
    }
}


dat staat er (in mijn eigen html file) toch op regel 2 ?

donderdag 12 augustus 2004 14:27

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

<html>
<head>
<title>
  .:Satellite:.  Reaching for the universe
</title>
<style type="text/css">
   A:link {text-decoration: none; color: #ADCF1B}
   A:visited {text-decoration: none; color: #ADCF1B}
   A:active {text-decoration: none; color: #ADCF1B}
   A:hover {text-decoration: none; background: #ffffff; color: #ADCF1B}
</style>

<script type="text/javascript">
  function newImage(arg)
  {
    if (document.images)
    {
      rslt = new Image();
      rslt.src = arg;
      return rslt;
    }
  }

  function changeImages()
  {
    if (document.images && (preloadFlag == true))
    {
      for (var i=0; i<changeImages.arguments.length; i+=2)
      {
        document.images[changeImages.arguments[i]].src = changeImages.arguments[i+1];
      }
    }
  }

  var preloadFlag = false;
  nav_bar_left_nav_bar_home_over = newImage("nav-bar-left-nav-bar-home_o.gif");
  nav_bar_home_over = newImage("nav-bar-home-over.gif");
  nav_bar_news_over = newImage("nav-bar-news-over.gif");
  nav_bar_art_over = newImage("nav-bar-art-over.gif");
  nav_bar_it_over = newImage("nav-bar-it-over.gif");
  nav_bar_chillout_over = newImage("nav-bar-chillout-over.gif");
  nav_bar_contact_over = newImage("nav-bar-contact-over.gif");
  preloadFlag = true;
</script>

</head>
<body bgcolor="#B0D60B" BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
  <table width="100%" cellspacing="0" cellpadding="0">
    <tr><td valign="top" width="100%">
      <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr>
          <td>[img]"Sat-ban-1.gif"></td>
[/img][img]"Sat-ban-2.gif"></td>
[/img][img]"Sat-ban-3.gif"></td>
[/img][img]"Sat-ban-4.gif"></td>
[/img][img]"Sat-ban-5.gif"></td>
[/img][img]"Sat-ban-6.gif"></td>
[/img][img]"Sat-ban-7.gif"></td>
[/img][img]"Sat-ban-8-(spacer).gif"></td>
[/img][img]"Sat-ban-9.gif"></td>
[/img]
      </table>
    </td></tr>
    <tr><td valign="top" width="100%">
      <table cellspacing="0" cellpadding="0">
       <tr>
        <td>[img]"nav-bar-left.gif"></td>
[/img]
            <A HREF="#"
              ONMOUSEOVER="changeImages('nav_bar_left', 'nav-bar-left-nav-bar-home_o.gif', 'nav_bar_home', 'nav-bar-home-over.gif'); return true;"
              ONMOUSEOUT="changeImages('nav_bar_left', 'nav-bar-left.gif', 'nav_bar_home', 'nav-bar-home.gif'); return true;">
              [img]"nav-bar-home.gif"[/img]</A></TD>
          <TD>
            <A HREF="#"
              ONMOUSEOVER="changeImages('nav_bar_news', 'nav-bar-news-over.gif'); return true;"
              ONMOUSEOUT="changeImages('nav_bar_news', 'nav-bar-news.gif'); return true;">
              [img]"nav-bar-news.gif"[/img]</A></TD>
          <TD>
            <A HREF="#"
              ONMOUSEOVER="changeImages('nav_bar_art', 'nav-bar-art-over.gif'); return true;"
              ONMOUSEOUT="changeImages('nav_bar_art', 'nav-bar-art.gif'); return true;">
              [img]"nav-bar-art.gif"[/img]</A></TD>
          <TD>
            <A HREF="#"
              ONMOUSEOVER="changeImages('nav_bar_it', 'nav-bar-it-over.gif'); return true;"
              ONMOUSEOUT="changeImages('nav_bar_it', 'nav-bar-it.gif'); return true;">
              [img]"nav-bar-it.gif"[/img]</A></TD>
          <TD>
            <A HREF="#"
              ONMOUSEOVER="changeImages('nav_bar_chillout', 'nav-bar-chillout-over.gif'); return true;"
              ONMOUSEOUT="changeImages('nav_bar_chillout', 'nav-bar-chillout.gif'); return true;">
              [img]"nav-bar-chillout.gif"[/img]</A></TD>
          <TD>
            <A HREF="#"
              ONMOUSEOVER="changeImages('nav_bar_contact', 'nav-bar-contact-over.gif'); return true;"
              ONMOUSEOUT="changeImages('nav_bar_contact', 'nav-bar-contact.gif'); return true;">
              [img]"nav-bar-contact.gif"[/img]</A></TD>
        <td width="100%" background="nav-bar-8-(spacer).gif">[img]"nav-bar-8-(spacer).gif"></td>
[/img][img]"nav-bar-right.gif"></a></td>
[/img]
      </table>
    </td></tr>
    <tr>
     <td width="100%" bgcolor="#ffffff">
      Tekst enzo.....
      <br><br><br><br><br><br><br><br><br><br><br><br>
     <td>
    </tr>
  </table>
</body>
</html>

zo?

[ Voor 104% gewijzigd door André op 12-08-2004 15:42 ]

donderdag 12 augustus 2004 14:39

Acties:

Verwijderd

Topicstarter
Owkee, dit stuk...
Java:
1
2
3
4
5
6
7
8
9
10
11
12
13

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        nav_bar_left_nav_bar_home_over = newImage("nav-bar-left-nav-bar-home_o.gif");
        nav_bar_home_over = newImage("nav-bar-home-over.gif");
        nav_bar_news_over = newImage("nav-bar-news-over.gif");
        nav_bar_art_over = newImage("nav-bar-art-over.gif");
        nav_bar_it_over = newImage("nav-bar-it-over.gif");
        nav_bar_chillout_over = newImage("nav-bar-chillout-over.gif");
        nav_bar_contact_over = newImage("nav-bar-contact-over.gif");
        preloadFlag = true;
    }
}

...is dus naar dit...
Java:
1
2
3
4
5
6
7
8
9

var preloadFlag = false;
  nav_bar_left_nav_bar_home_over = newImage("nav-bar-left-nav-bar-home_o.gif");
  nav_bar_home_over = newImage("nav-bar-home-over.gif");
  nav_bar_news_over = newImage("nav-bar-news-over.gif");
  nav_bar_art_over = newImage("nav-bar-art-over.gif");
  nav_bar_it_over = newImage("nav-bar-it-over.gif");
  nav_bar_chillout_over = newImage("nav-bar-chillout-over.gif");
  nav_bar_contact_over = newImage("nav-bar-contact-over.gif");
  preloadFlag = true;

...veranderd (dit stuk begon bij u op regel 35)

Ge-upload, er is niets veranderd aan uitzicht...

edit:

Wel wat veranderd: als ik nu op een navigatie stuk klik (behalve home) dan krijg ik de afbeelding niet meer..
linkje

[ Voor 15% gewijzigd door Verwijderd op 12-08-2004 14:42 ]

donderdag 12 augustus 2004 14:48

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Ik had 1 dingetje fout, die heb ik aangepast. Probeer hem nu eens.

donderdag 12 augustus 2004 14:54

Acties:

Verwijderd

Topicstarter
VOORUITGANG _/-\o_

Een enkel probleem: de home button doet het nog niet, de rest wel...
linkje

donderdag 12 augustus 2004 14:58

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Verwijderd schreef op 12 augustus 2004 @ 14:54:
VOORUITGANG _/-\o_

Een enkel probleem: de home button doet het nog niet, de rest wel...
linkje
Gokje:

nav_bar_left_nav_bar_home_over = newImage("nav-bar-left-nav-bar-home_o.gif");

moet worden:

nav_bar_left_over = newImage("nav-bar-left-nav-bar-home_o.gif");

donderdag 12 augustus 2004 15:01

Acties:

Verwijderd

Topicstarter
Verkeerd gegokt :)

donderdag 12 augustus 2004 15:03

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

En bij:

[img]"nav-bar-left.gif"[/img]

een name:

[img]"nav-bar-left.gif"[/img]

donderdag 12 augustus 2004 15:07

Acties:

Verwijderd

Topicstarter
Strike 2...

(neej dus :))

donderdag 12 augustus 2004 15:16

Acties:
  • André
  • Registratie: Maart 2002
  • Laatst online: 18-05 16:30

André

Analytics dude

Hmm, zoals ik hem nu in mijn vorige grote post heb staan werkt hij bij mij.

Edit: Strike 3 and out :P

[ Voor 21% gewijzigd door André op 12-08-2004 15:30 ]

donderdag 12 augustus 2004 15:31

Acties:

Verwijderd

Topicstarter
Nope, not out
Homerun ;)

Kweet alleen niet waar mijn fout zat... Ik heb u html page overgenomen en die werkte... dus ja :p

Zoek het verschil:
goed
fout

/me is jullie heel dankbaar

Ow, BTW, dat CSS lijkt mij nu niet echt gemakkelijker eigelijk... maar dat zal wel aan mij liggen :)

Black Box
Pagina: 1
Reageer