Just nu i M3-nätverket
Jump to content

Rollover Image


Diver Girl

Recommended Posts

Hej

Jag hittade en gammal tråd här på forumet som gör precis det jag är ute efter:

//eforum.idg.se/viewmsg.asp?EntriesId=717191#717191

 

Men jag lyckas inte få riktigt rätt på det.

Det verkar vara restoreImage-funktionen som ställer till det för mig.

Jag hämtar url:er till bilderna från en xml-fil som jag loopar igenom i en ul-lista.

Default är bilderna grå, när jag hovrar blir bilderna i färg och när jag klicka på bilden är bilderna fortfarande i färg. Precis som jag vill.

Men på onmouseout anropas restoreImage() och bilden ska bli grå igen.

Den "hovrar" tillbaka den första bilden som jag fört musen över på samtliga bilder jag för musen över.

 

Någon som vet vad som kan vara fel?

Vore tacksam för hjälp!

Kanske finns det t om ett enklare sätt än det här?!

 

Min kod:

PHP som loopar bilderna och anrop till javascript-funktionerna:

<?php
			$xml = simplexml_load_file('xml_images.xml');
			$imageNo = count($xml->category[0]->image);

			for ($i=0; $i<$imageNo; $i++) {
				$headline = $xml->category[0]->image[$i]->headline;
				$desc = $xml->category[0]->image[$i]->description;
				$img = $xml->category[0]->image[$i]->image_url;
				$hover = $xml->category[0]->image[$i]->image_hover_url;
				?>
                  <li><img class="work_img" id="img<?php echo $i;?>" src="<?php echo $img; ?>" width="92" height="200" border="0" alt="<?php echo $headline; ?>" 
                  title="<?php echo $headline; ?>" 
                  onclick="setImage(this,'<?php echo $hover;?>',true); showText(this, '<?php echo $headline; ?>', '<?php echo $desc; ?>'); return false;"
                  onmouseover="setImage(this,'<?php echo $hover;?>',false);" onmouseout="restoreImage(this);" />
                  </li>
               <?php
			}
		?>

 

Javascriptet:

var gRestoreSrc;
var gClickedImageId = null;

function setImage( pImageObject, pSrc, pIsClicked) 
{
if(pIsClicked)
{
if(gClickedImageId != null && gClickedImageId != pImageObject.id)
{
tImg = document.getElementById(gClickedImageId);
tImg.src = gRestoreSrc;
}
gClickedImageId = pImageObject.id;
}
else if(pImageObject.id != gClickedImageId && gRestoreSrc == null)
{
gRestoreSrc = pImageObject.src;
}
pImageObject.src = pSrc;
}

function restoreImage(pImageObject) 
{
if(pImageObject.id != gClickedImageId)
pImageObject.src = gRestoreSrc;
}

 

Mvh

DiverGirl

 

Link to comment
Share on other sites

Vad menar du med genererade HTML-koden?

PHP-koden jag skrev ner är den kod som både genererar ul-listan och anropar på funktionerna.

 

Är det någon annan kod du syftar på?

 

/DiverGirl

 

Link to comment
Share on other sites

om man surfar till den sidan med internet explorer och "visa källa".

_den_ genererade koden. Php visas ju inte för användaren utan php genererar HTML-markup.

 

Link to comment
Share on other sites

Javisst - så dum jag är...

 

Jo, den har jag kollat och jag tyckte den såg rätt ut.

Så här ser den ut (eller delar av den, jag tog inte med alla bilder):

 

<li><img class="work_img" id="img0" src="images/website/img1_grey.jpg" width="92" height="200" border="0" alt="www.company.se" 
                  title="www.company.se" 
                  onclick="setImage(this,'images/website/img1.jpg',true); showText(this, 'www.company.se', 'Text om company website'); return false;"
                  onmouseover="setImage(this,'images/website/img1.jpg',false);" onmouseout="restoreImage(this);" />
                  </li>
                                  <li><img class="work_img" id="img1" src="images/website/img2_grey.jpg" width="92" height="200" border="0" alt="www.company.se" 
                  title="www.company.se" 
                  onclick="setImage(this,'images/website/img2.jpg',true); showText(this, 'www.company.se', 'Text om company website'); return false;"
                  onmouseover="setImage(this,'images/website/img2.jpg',false);" onmouseout="restoreImage(this);" />
                  </li>

 

/DiverGirl

 

 

 

 

 

 

Link to comment
Share on other sites

Jag har testat i alla de vanligaste (IE6, IE7, FF, Opera, Safari, Chrome) och det är samma problem i alla.

 

 

 

Link to comment
Share on other sites

Inga fler idéer??

 

Jag har fortfarande inte löst mitt problem, och jag vet faktiskt inte hur jag ska lösa det heller.

 

/DiverGirl

 

Link to comment
Share on other sites

Nej, tyvärr har jag ju inte det. Jobbar lokalt fortfarande.

Fast det skulle jag ju iofs kunna ändra på - återkommer.

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...