Søg
Avatar billede ktoft Nybegynder
04. februar 2002 - 21:04 Der er 12 kommentarer og
1 løsning

Mouseover billeder og tekst

Er der nogen derude der sider inde med koderne til følgende scenarier, og er villig til at dele dem?

1/ Klassikeren: Mouseover picture -> som skifter et andet billede, som bliver stående nå Mouseout.

2/ Samme funktion med tekst i stedet for billeder.

3/ Mouseover picture -> skifter tekst.

4/ Mouseover tekst -> skifter billede.

På forhånd tak.
Avatar billede rune_c Nybegynder
04. februar 2002 - 21:10 #1
Sådan en kan jeg godt lige lave! Det kommer lige til at tage lidt tid.
Avatar billede martinfrost Nybegynder
04. februar 2002 - 21:31 #2
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
<!--
A.normal:link {color:red}
A.normal:hover {color:blue}
-->
</style>

<img src="0.jpg" alt="Jeg skifter ononmouseover" name="pic1" onmouseover="document.pic1.src='1.jpg';">
<br><a class="normal" href="java script:void(0)">Jeg skifter onMouseover</a><br>

<div id="tekst1" onmouseover="document.pic2.src='0.jpg';">Jeg skifter billedet onmouseover</div><br>
<img src="1.jpg" alt="Jeg skifter onmouseover" name="pic2" onmouseover="tekst1.style.color='red';"><br>

</body>
</html>


Mvh
Martin

Men er det rigtig forstået at det IKKE skal skifte tilbage ved mouseout?
Avatar billede ktoft Nybegynder
04. februar 2002 - 21:44 #3
Ja det er rigtig forstået. Nå billedet eller teksten har skiftet, må det først skifte igen nå man fører musen hen over et andet billede eller tekst.
Avatar billede martinfrost Nybegynder
04. februar 2002 - 21:51 #4
Du vil altså have at de tre øvrige objekters ændring nulstilles, når musen er over et objekt?
Avatar billede martinfrost Nybegynder
04. februar 2002 - 22:06 #5
<html>
<body>
<style type="text/css">
A.normal:link {color:red}
A.normal:hover {color:blue}
</style>

<img src="0.jpg" alt="Jeg skifter ononmouseover" name="pic1" onmouseover="document.pic1.src='1.jpg';document.pic2.src='0.jpg';tekst1.style.color='black';">
<br>

<a class="normal" href="java script:void(0)">Jeg skifter onMouseover (som link)</a><br>

<div id="tekst1" onmouseover="document.pic2.src='1.jpg';document.pic1.src='0.jpg';tekst1.style.color='black';">Jeg skifter billedet onmouseover</div><br>
<img src="0.jpg" alt="Jeg skifter teksten onmouseover" name="pic2" onmouseover="tekst1.style.color='red';document.pic1.src='0.jpg';document.pic2.src='0.jpg';"><br>

</body>
</html>

Er det tilfredsstillende kode?
Avatar billede ktoft Nybegynder
04. februar 2002 - 22:07 #6
Hver af punkter har som så ikke nået med hinanden at gøre. 1 er billede til billede, 2 er tekst til tekst, 3 billede til tekst & 4 tekst til billede.

4 uafhængige scripts.
Avatar billede martinfrost Nybegynder
04. februar 2002 - 22:11 #7
Javel... jeg kommer lige med et nyt bud så :)
Avatar billede martinfrost Nybegynder
04. februar 2002 - 22:18 #8
<html>
<body>

<!--Script 1-->
<img src="0.jpg" name="pic1" onmouseover="document.pic1.src='1.jpg';document.pic2.src='0.jpg';document.pic3.src='0.jpg';">
<img src="0.jpg" name="pic2" onmouseover="document.pic2.src='1.jpg';document.pic1.src='0.jpg';document.pic3.src='0.jpg';">
<img src="0.jpg" name="pic3" onmouseover="document.pic3.src='1.jpg';document.pic1.src='0.jpg';document.pic2.src='0.jpg';">

<br><br><br>

<!--Script 2-->
<a id="tekst1" onmouseover="tekst1.style.color='red';tekst2.style.color='black';tekst3.style.color='black'">Tekst1</a>
<a id="tekst2" onmouseover="tekst2.style.color='red';tekst1.style.color='black';tekst3.style.color='black'">Tekst2</a>
<a id="tekst3" onmouseover="tekst3.style.color='red';tekst1.style.color='black';tekst2.style.color='black'">Tekst3</a>

</body>
</html>


Ved så at kombinere onmouseover-delen i script 1 og 2 har du dermed 3 og 4
Mvh
Martin
Avatar billede wondergirl Nybegynder
05. februar 2002 - 09:46 #9
Eksempel til menu med mouseover, hvor billedet forean/bagefter tekstlinket bliver, når man har klikker (virker bedst i frames):

Du skal bruge en on-gif og en off.gif

<html>
<head>
<title></title>
<SCRIPT>
Net=1;
if ((navigator.appName.substring(0,5) == "Netsc" && navigator.appVersion.charAt(0) > 2) || (navigator.appName.substring(0,5) == "Micro" && navigator.appVersion.charAt(0) > 3)) {
Net=0;
over = new Image;
out = new Image;
gammel = new Image;
over.src = "on.gif";
out.src = "off.gif";
gTarget = 'img1';
}
function Click(Target) {
if (Net != 1){
  if (Target != gTarget) {
  document[Target].src = over.src;
  document[gTarget].src = out.src;
  gTarget = Target;
  gammel.src = document[Target].src;
  }
}
}
function Over(Target) {
if (Net != 1){
  gammel.src = document[Target].src;
  document[Target].src = over.src;
}
}
function Out(Target) {
if (Net != 1){
  document[Target].src = gammel.src;
}
}
</SCRIPT>
</head>
<body>
<A HREF="1.html" onMouseOver="Over('img1')" onMouseOut="Out('img1')" onClick="Click('img1')" target=Main><IMG NAME=img1 SRC="on.gif" BORDER=0>Link 1</a><br>
<A HREF="2.html" onMouseOver="Over('img2')" onMouseOut="Out('img2')" onClick="Click('img2')" target=Main><IMG NAME=img2 SRC="off.gif" BORDER=0>Link 2</a><br>
<A HREF="3.html" onMouseOver="Over('img3')" onMouseOut="Out('img3')" onClick="Click('img3')" target=Main><IMG NAME=img3 SRC="off.gif" BORDER=0>Link 3</a><br>
</body>
</html>
Avatar billede dhunters Nybegynder
06. februar 2002 - 17:20 #10
Hvis du vil lave det på en meget nem måde, så tag og få fat i et program som f.eks. Dreamweaver. Det laver det automatisk...
Avatar billede ktoft Nybegynder
07. februar 2002 - 17:37 #11
Jeg fik vist ikke med, at nå jeg føre musen hen over et punkt er det et andet punkt som skal skifte!
Avatar billede ktoft Nybegynder
12. marts 2002 - 20:49 #12
luk
Avatar billede chrisson Nybegynder
14. februar 2003 - 12:52 #13
/away
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:15 Internet forsvinder hele tiden Af TTA i Internetforbindelser
23/0920:49 Fejl på Tv2 Play Af Bukse i Browsere
23/0918:11 VB, Lægge 2 celler sammen og skrive den i cellen ved side af Af MC3390 i Excel
21/0910:39 DBA er ikke hvad det tidligere var - desværre! Af ErikHg i Fri debat
18/0919:52 Libre office skriveprogram Af Frank i Office & Kontorpakker
White papers
Flere white papers »