Avatar billede mema Nybegynder
09. september 2009 - 15:40 Der er 15 kommentarer

imagemap med mouseover

Jeg har en imagemap der skifter billeder med onmouseover event. Men når musen er væg bliver der vist det oprindelige billede. Jeg vil gerne have, at billedet (område på imagemap), der er blevet klikket på, bliver ved at være vist.
Tak for hjælpen på forhånd.
Avatar billede olebole Juniormester
09. september 2009 - 20:38 #1
<ole>

Prøv at lægge et link til siden

/mvh
</bole>
Avatar billede mema Nybegynder
09. september 2009 - 22:48 #2
Imagemappen og hjemmeside er stadigvæk på udviklingsmaskine. Men min nuværende kode ser sådan ud (men det virker ikke helt efter hensigten):

<script language="javascript" type="text/javascript">
<!-- Skjuler scriptet for ældre browsere

    if (document.images) {
        billed1 = new Image
        billed2 = new Image
        .....
        billedOriginal = new Image

        billed1.src = "images/l.jpg"
        billed2.src = "images/l.jpg"
        .....
        billedOriginal.src = "images/original.jpg"
    }
    // Slut på kommentar, der skjuler scriptet for ældre browsere -->
</script>
<map name="minMap" style="border: 0px">
<area href="link1.." shape="poly" coords="...." onmouseover="document.roll.src=billed1.src" onmouseout="document.roll.src=billed1.src" alt="blabal.." onFocus=blur() />
<area href="link2.." shape="poly" coords="....." onmouseover="document.roll.src=billed2.src" onmouseout="document.roll.src=billed2.src" alt="blabal.." onFocus=blur() />
....
</map>   

<img border="0" src="images/original.jpg" usemap="#minMap" name="roll" />
Avatar billede mema Nybegynder
12. september 2009 - 00:41 #3
Ingen hjælp????????
Avatar billede olebole Juniormester
13. september 2009 - 18:03 #4
Det er et meget gammelt script - og jeg forstår stadig ikke dit spørgsmål. Der skiftes ikke noget i et område af billedet. Hele billedet skiftes
Avatar billede mema Nybegynder
14. september 2009 - 17:56 #5
Jeg ved godt, at hele billedet skiftes. Jeg prøver at udtrykker mig tydelligere.
På min imagemap er der ca. 12 billeder og en original-billede. Pr. default vises original billedet, men pga mouseover skiftes original billedet med det billede, som musen (gennem hotspot) peger på. (jeg håber at det er forståeligt indtil nu).
Det som jeg leder efter er, at have justeres mit scipt eller et nyt script, der virker sådan, at mouseover effekten er der som nu, men når man klikker på et billedet, det billede som man har klikket på (hotspot) bliver ikke skiftet til original-billede, når man kører musen væk.
Håber at får en sådan ;)
Avatar billede mema Nybegynder
16. september 2009 - 14:50 #6
OK. Nu har jeg lagt det på drifsserveren:
https://secure.mim.dk/sns/webshop/

Det som jeg gerne vil er:

- klik på danmarkskortet (til venstre side), fx Vendsyssel, hvor der pt. er data.
- jeg vil gerne opnå at Vendsyssel forbliver grøn, når man har klikket på den.

Håber at få nu hjælp ;)
Avatar billede olebole Juniormester
16. september 2009 - 16:08 #7
Normalt hedder billedet vist:
    https://secure.mim.dk/sns/webshop/images/EnhederLl.jpg

Når du så klikker på 'Kronjylland', skiftes siden til:
    https://secure.mim.dk/sns/webshop/KatalogRegion.aspx?RegionID=7

På denne side loader du ikke:
    https://secure.mim.dk/sns/webshop/images/EnhederLl.jpg

- men:
    https://secure.mim.dk/sns/webshop/images/EnhederKronjyllandLl.jpg

- stadig med det samme map. Den slags opgaver løses stort set altid på serveren  =)
Avatar billede mema Nybegynder
16. september 2009 - 22:17 #8
Så går jeg ud fra, at man ikke kan bruge javascript? Hvis nej, så har du måske et godt link eller kodelinier..?

Du må gerne have points, send bare et svar.
Avatar billede olebole Juniormester
17. september 2009 - 00:17 #9
Du kan begynde med at lave dine billednavne om, så de indeholder ID'et på den pågældende region. Kortet uden highlights kan du så kalde noget med 0 - f.eks: EnhederLl_0.jpg, EnhederLl_1.jpg, EnhederLl_2.jpg ... osv.

Herefter kan du lave din kode om til (som den vil se ud på Bornholm siden):


<script type="text/javascript">
var sDefImgName = "EnhederLl_2.jpg";

var sImgPath = "images/";
var aImgNames = [
    "EnhederLl_1.jpg",
    "EnhederLl_2.jpg",
    "EnhederLl_4.jpg"
];

var aPreloads = [];
for (var i=0,j=aImgNames; i<j; i++) {
    aPreloads[i] = new Image();
    aPreloads[i].src = sImgPath+aImgNames[i];
}

function swap(sSrc) {
    var oImg = document.getElementById("roll");
    oImg.setAttribute("src", sImgPath+sSrc);
}
</script>

<map name="minMap" style="border: 0px">
<area href="https://secure.mim.dk/sns/webshop/KatalogRegion.aspx?RegionID=1" shape="poly" coords="...." onmouseover="swap('EnhederLl_1.jpg')" onmouseout="swap(sDefImgName)" alt="Vendsyssel" onFocus=blur() />
<area href="https://secure.mim.dk/sns/webshop/KatalogRegion.aspx?RegionID=2" shape="poly" coords="....." onmouseover="swap('EnhederLl_2.jpg')" onmouseout="swap(sDefImgName)" alt="Bornholm" onFocus=blur() />
<area href="https://secure.mim.dk/sns/webshop/KatalogRegion.aspx?RegionID=4" shape="poly" coords="....." onmouseover="swap('EnhederLl_3.jpg')" onmouseout="swap(sDefImgName)" alt="Himmerland" onFocus=blur() />
....
</map>   

<img border="0" src="images/EnhederLl_2.jpg" usemap="#minMap" id="roll" name="roll" />


Med serverkode skal du skrive regions ID'et (2) ind i filnavnet her:

var sDefImgName = "EnhederLl_2.jpg";

- og her:

<img border="0" src="images/EnhederLl_2.jpg" usemap="#minMap" id="roll" name="roll" />
Avatar billede olebole Juniormester
17. september 2009 - 00:19 #10
- og du fylder selvfølgelig bare resten af billednavnene i array'et aImgNames  ;o)
Avatar billede olebole Juniormester
17. september 2009 - 00:23 #11
PS: Når du står på en side, hvor URL'en ikke indeholder et regions ID, udskriver du EnhederLl_0.jpg begge steder
Avatar billede mema Nybegynder
24. september 2009 - 19:52 #12
Tak olebole for hjælpen... Men som du kan se, virker det stadigvæk kun mouseover og den klikkede lokalenhed forbliver ikke grønt.

Imagemappen ligger i en UserControl (SkovRegioner.ascx), der ligger så i en Masterpage. Måske er dette problemet.
Ellers forstår jeg ikke med din kommentar: 17. september 2009 kl. 00:23:39.
Jeg prøver i CodeBehind af SkovRegioner.ascx.cs i PageLoad delen tjekke hvad querystring af regionId er, og så vise den rigtige billede, men det lykkes slet ikke.
Avatar billede olebole Juniormester
24. september 2009 - 22:00 #13
Hvis ikke det lykkes for dig at skrive det rigtige billede ind i koden, er det klart, det ikke virker.

Koemmentaren i #11 betyder blot, at du skal indsætte billedet uden grønne highlights, når du ikke står på en side, hvor kortet bør have highlights - dvs, hvor URL'en ikke indeholder et id på en region
Avatar billede mema Nybegynder
25. september 2009 - 00:23 #14
Ja, men det prøver jeg at tjekke. men jeg kan ikke få fat i imagemap eller selve billedet i koden for at anvise den det rigtige billede. Måske skal jeg skrive til asp.net delen her på sitet, men det som prøver og ikke virker:

....
if (Request.QueryString["regionId"] != null) //dvs. har regionId
{
string lokalenhed = Request.QueryString["regionId"].ToString();
-----
OG HER HAR JEG PROBLEM VED AT DEFINERE BILLEDET!!!!, der skal
vises, hvilkets nummer skal være det samme som 'lokalenhed' returnerer, eller vise billedet, der er bare grå, når det returnerer null: images/EnhederLl_0.jpg
....
ImageMap ??? ELLER
Image ???
....
Avatar billede olebole Juniormester
25. september 2009 - 22:37 #15
Jeg fatter ikke hat af, hvad du skriver
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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