javascript - onMouseOver skift billede. - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

Bruger #8715 @ 28.11.09 20:48

Hej, lige for at gøre det klart så er jeg ikke nogen skarp haj til javascript.

Mit problem ligger i at jeg har et billede

Kode

					
<a href=\"test\">
<img src=\"billeder/afstemning_lys.jpg\" onmouseover=\"this.src='billeder/afstemning_mork.jpg'\"
onmouseout=\"this.src='billeder/afstemning_lys.jpg'\" border=\"0\"></a>

Og så har jeg laver en div hvor der er noget tekst som ligger oven på det her billede, mit problem er at når jeg har musen over teksten så er billedet lyst som det ikke skal være, fordi den skal være mørk når man har musen over, men når jeg bare har musen over billedet virker det fint.

Problemet ligger i at teksten optager noget plads så den blokere så billedet ikke ved man har musen over eller det er iværtifald hvad jeg tror problemet er.

Jeg har prøvet at "merge" teksten med billedet via PHP men det gik helt galt til sidst.

Jeg har prøvet et eller andet med ElementsByName ved noget javascript men det funkede heller ikke og jeg er virkelig en hat når det kommer til JavaScript.

Jeg håber der er et klogt hovede derude som kan hjælpe mig med dette problem, tak på forhånd.

Indlæg senest redigeret d. 28.11.2009 20:49 af Bruger #8715

5 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 3 karma

Sorter efter stemmer Sorter efter dato

Bruger #8773 @ 29.11.09 13:41

658

Hvis du har flere, skal du give id="" delen et nummer bagefter - f.eks. img_1 og i mouseover skal det være noget med changeImg('lys','1'); hvis id'et er 1 - hvis du forstår?

Når du så bruger "getElementById" skal du jo så huske at sætte det 1-tal ind også..

Funktionen vil altså se ca. sådan her ud:

JScript kode

 function changeImg(changeTo, imgId){
 
   if(changeTo == "lys"){
     document.getElementById("img_"+imgId).src="billeder/afstemning_lys.jpg";
   }else{
     document.getElementById("img_"+imgId).src="billeder/afstemning_mork.jpg";
   }
 
 }

Og HTML'en:

HTML kode

 <a href=\"test\">
   <img src=\"billeder/afstemning_lys.jpg\" id=\"img_[ID]\" border=\"0\" onMouseOver=\"changeImg('mork','[ID]');\" onMouseOut=\"changeImg('lys','[ID]');\"/>
 </a>
 
 <div id=\"afstemning_svar_mulighed\">
   <a href=\"test\" onMouseOver=\"changeImg('mork','[ID]');\" onMouseOut=\"changeImg('lys','[ID]');\">".$explode_svar_muligheder[$start_nummer]."</a>
 </div>

Hvor du så skal hente [ID] fra din database med PHP

Indlæg senest redigeret d. 29.11.2009 13:42 af Bruger #8773

Bruger #8773 @ 29.11.09 00:15

658

Hmm, ikke helt sikker, men prøv følgende:

Kode


<script type="text/javascript">

function changeImg(changeTo){

  if(changeTo == "lys"){
    document.getElementById("img").src="billeder/afstemning_lys.jpg";
  }else{
    document.getElementById("img").src="billeder/afstemning_mork.jpg";
  }

}

</script>

<a href="test">
<img src="billeder/afstemning_lys.jpg" id="img" onMouseOver="changeImg('mork');" onMouseOut="changeImg('lys');" />
</a>

Jeg har ikke testet koden, men burde virke

Indlæg senest redigeret d. 29.11.2009 00:16 af Bruger #8773

Bruger #8715 @ 29.11.09 13:07

124

Det super det der Simon, jeg har ændret lidt i koden til.

Kode

							<a href=\"test\">
								<img src=\"billeder/afstemning_lys.jpg\" id=\"img\" border=\"0\" onMouseOver=\"changeImg('mork');\" onMouseOut=\"changeImg('lys');\"/>
							</a>
							<div id=\"afstemning_svar_mulighed\">
								<a href=\"test\" onMouseOver=\"changeImg('mork');\" onMouseOut=\"changeImg('lys');\">".$explode_svar_muligheder[$start_nummer]."</a>
							</div>

Og det virker også fint.

Mit php script virker sådan at den henter X antal spørgsmål ud fra MySQL det kommer an på hvor mange jeg har lavet dvs. der er tit forskellige antal spørgsmål, men det her script virker godt og det med linket er lyst, nu har jeg et problem til og det er at kun den øverste hver gang skifter farve, men det er logisk nok da det er efter id'et "img"
Jeg prøvede så i javascript delen at skrive

Kode

function changeImg(changeTo){

  if(changeTo == "lys"){
	this.src='billeder/afstemning_lys.jpg
    //document.getElementById("img").src="billeder/afstemning_lys.jpg";
  }else{
	this.src='billeder/afstemning_mork.jpg
    //document.getElementById("img").src="billeder/afstemning_mork.jpg";
  }

}

Men det virkede ikke desværre.

Mvh. Galima

Bruger #8715 @ 29.11.09 18:23

124

Sådan mand! det er satme nice.

Mange tak skal du have.

Bruger #8773 @ 29.11.09 18:28

658

Det var da så lidt

onMouseOver skift billede.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler