Notifikationer

Markér alle som læst Log ud

lademan Novice

28. april 2003 - 14:19 Der er 16 kommentarer og
1 løsning

Mouseover/out og onclick

Hej

Jeg leder efter et scipt, som ændrer tekstfarve og cellefarve ved hhv. mouseover og mouseout.

Men når jeg klikker på cellen og ryger videre til en ny side skal cellefarve og tekstlink forblive som ved mouseover uanset om man ryger over cellen med musen.

Først når man klikker på en af de andre celler i menuen ændres cellefarve og cellelink i den pågældende celle.

Det skal bruges til en menu og må derfor godt understøttes af mange browsere :-)

Tak for hjælpen!

Synes godt om

Slettet bruger

28. april 2003 - 14:22 #1

<td onMouseOver="this.style.backgroundColor = 'black'; this.style.color = 'white';" onMouseOut="this.style.backgroundColor = 'blue'; this.style.color = 'black';" style="background-color: blue; color: black;">

Hvis effekten ikke skal kunne lade sig gøre, lader du bare være med at inkludere onMouseOver og onMouseOut! :)

Synes godt om

Slettet bruger

28. april 2003 - 14:22 #2

Hvis du bruger det i forbindelse med en iframe bliver det lidt sværere.

Synes godt om

olebole Juniormester

28. april 2003 - 20:45 #3

<ole>

Er der et link i din <td>, eller skifter du side med JavaScript?
Er det siden selv, der skiftes, eller er det en frame eller iframe, der skiftes side i?

/mvh
</bole>

Synes godt om

lademan Novice

30. april 2003 - 14:41 #4

Der er et link i min <td>
Det er siden selv, der skal siftes.

Håber at få lidt hjælp :-)

Synes godt om

lademan Novice

30. april 2003 - 14:42 #5

Dvs % (i)frame

Synes godt om

lademan Novice

30. april 2003 - 14:45 #6

Måske man kunne lave en eller anden form for udbygning af denne:

<script type="text/JavaScript">
function mOver(elm) {
elm.style.backgroundColor = "#9F2400";
elm.style.color = "#FFFFFF";
}
function mOut(elm) {
elm.style.backgroundColor = "#FBF9F4";
elm.style.color = "#000000";
}
</script>

Synes godt om

Slettet bruger

30. april 2003 - 15:07 #7

Hvis siden selv skal skiftes, skal du bruge det script, jeg skrev til at starte med.

Synes godt om

lademan Novice

30. april 2003 - 23:29 #8

Jamen dit script kan da ikke det jeg efterspørger?

Synes godt om

Slettet bruger

01. maj 2003 - 17:12 #9

Det ser ellers sådan ud:

<table cellspacing="0" cellpadding="3">
<tr>
<td onClick="self.location.href = 'side1.html';" style="background-color: #000099; color: white; cursor: pointer; cursor: hand;">
Side 1
</td>
<td onClick="self.location.href = 'side2.html';" onMouseOver="this.style.backgroundColor = 'black'; this.style.color = 'white';" onMouseOut="this.style.backgroundColor = '#6699CC'; this.style.color = 'black';" style="background-color: #6699CC; color: black; cursor: pointer; cursor: hand;">
Side 2
</td>
<td onClick="self.location.href = 'side3.html';" onMouseOver="this.style.backgroundColor = 'black'; this.style.color = 'white';" onMouseOut="this.style.backgroundColor = '#6699CC'; this.style.color = 'black';" style="background-color: #6699CC; color: black; cursor: pointer; cursor: hand;">
Side 3
</td>
</tr>
</table>

På "side2.html" og "side3.html" bytter du så selvfølgelig om på koderne.

Synes godt om

olebole Juniormester

01. maj 2003 - 17:47 #10

Skal det gøres med script, kan du gøre sådan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
var actCell, loc = location.href;
actCell = (loc.indexOf("?c=")!=-1)? loc.split("?")[1].split("=")[1] : false;
function mOver(c) {
if (c.id==actCell) return;
c.style.backgroundColor = "#ff0000";
c.style.color = "#ffffff";
}
function mOut(c) {
if (c.id==actCell) return;
c.style.backgroundColor = "#ffffff";
c.style.color = "#000000";
}
function mClick(c, url) {
location.href = url + "?c=" + c.id;
}
window.onload = function() {
if (actCell) {
document.getElementById(actCell).style.backgroundColor = "#ff0000";
document.getElementById(actCell).style.color = "#ffffff";
}
}
</script>
</head>
<body>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td id="c0" style="cursor:pointer;cursor:hand;" onmouseover="mOver(this)"
onmouseout="mOut(this)" onclick="mClick(this, 'side1.html')">bla bla bla</td>
</tr>
<tr>
<td id="c1" style="cursor:pointer;cursor:hand;" onmouseover="mOver(this)"
onmouseout="mOut(this)" onclick="mClick(this, 'side2.html')">bla bla bla</td>
</tr>
<tr>
<td id="c2" style="cursor:pointer;cursor:hand;" onmouseover="mOver(this)"
onmouseout="mOut(this)" onclick="mClick(this, 'side3.html')">bla bla bla</td>
</tr>
</table>

</body>
</html>

/mvh

Synes godt om

lademan Novice

02. maj 2003 - 13:15 #11

Cool script ole...

Men jeg arbejder med PHP og der vil derfor opstå situationer, hvor der allerede er et "?" i browserens adressefelt...

Kan man klare det uden, at man bruger variabler i adressefeltet?

Synes godt om

lademan Novice

02. maj 2003 - 13:21 #12

Holder sciptet egentlig i de fleste browsere?

Synes godt om

Slettet bruger

02. maj 2003 - 15:57 #13

Du kan også basere det på sidens navn. Hvis siden fx hedder "info.html", kan td'en med id="info" være den aktive celle.

Synes godt om

Slettet bruger

02. maj 2003 - 16:00 #14

Det kræver selvfølgelig en lille omskrivning af scriptet:

actCell = loc.substring(loc.lastIndexOf("/") + 1, loc.indexOf(".html"));

Så skal cellerne også navngives:

<td id="info" style="cursor:pointer;cursor:hand;" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this, 'side1.html')">
osv.

Synes godt om

olebole Juniormester

02. maj 2003 - 23:51 #15

Jamen, hvis du bruger PHP, er det jo helt hen i vejret at lave en JS-løsning. Så bruger du bare phoenixv's løsning (01/05-2003 17:12:11) :)
/mvh

Synes godt om

lademan Novice

24. juni 2003 - 10:06 #16

ok... har selv fundet en løsning :-)

Synes godt om

Slettet bruger

25. juni 2003 - 09:35 #17

Sjovt, det var der også et par andre herinde, der fandt...

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS