KAN det lade sig gøre at have links i et "onmouseover-image"?

Du kan jo lave en mapping for det billede. Alle knapperne ser jo ud til at have samme størrelse.

Hvorvidt du kan ændre denne mapping finder jeg lige ud af.

Men ellers kan du jo sige at du har max x punkter - så kan du lave en mapping for dem alle sammen, og så lave en javascript funktion til at loade med - så hvis brugeren klikker på en der ikke er der - så sker der ingen ting!

Jeg kan se at du i IE4 og opefter kan skifte den mapping et billede benytter med:

document.images["navn"].useMap = '#mapping'

det kræver du har en Mapping:

<MAP NAME="mapping">

</MAP>

Og et billede med navnet:

<IMG NAME="navn" SRC="sti.gif">

Ja, det kan lade sig gøre!

Kig ind på http://www.aakjaers.dk for et eksempel på en sådan menu, hvor jeg har lavet det på denne måde.

Du bruger et fast imagemap, hvor de forskellige links i det imagemap peger hen på f.eks. java script:skiftLink(3). Når du laver dit onMouseover på billedet til venstre skifter du en variabel der siger hvilken menu du bruger. Når funktionen skiftLink() så kaldes tjekker du efter hvilken menu du bruger og henter linket fra et array.

Hvis dette ikke giver mening så kig i koden på aakjaers.dk ;)

/Thor

Kan du finde ud af det henrik?

Var vi til nogen hjælp ?

/Thor

Du kan gøre det ved at ligge en image map ud ove billedet til højre.

Lave nogle Array's med de forskellige links, alt efter hvilke af de venstre billeder du sidst har været over.

var maps = new Array;

maps[1] = new Array();
maps[1][1] = "link1_1.htm";
maps[1][2] = "link1_2.htm";
maps[1][3] = "link1_3.htm";

maps[2] = new Array();
maps[2][1] = "link1_1.htm";
maps[2][2] = "link1_2.htm";
maps[2][3] = "link1_3.htm";

Og så indsætte lidt ekstra i denne funktion :

var curMap = 0;
function RefleksShift2 (N,IMG,NUM)
{
  if (BrowserCheck)
  {
    if (N != CurrentImg)
        {
      document.images[N].src = "type/" + IMG;
      curImg = NUM;
        }
  }
}

Hvor du så skal ændre din mouseovers til :
OnMouseOver="RefleksShift2(1,'type1.gif',1), window.status=''; return true"
osv.

Så indsætter du denne funktion :

function mapClick(num) {
  if (curImg != 0) {
    if ((maps[curImg][num] != "") && (maps[curImg][num] != null) {
      document.location = maps[curImg][num];
    }
  }
}

og så skal din href i imagemappen så sådan her ud :

href="java script:mapClick(1)"
osv.

Håber det var nok, ellers m¨du skrive igen

:)

JustinCase

Nu er min tålmodighed ved at være brugt op.

Nu er jeg startet forfra 40 gange mindst og det vil ikke stadig ikke virke for mig! Hvor skal jeg sætte koderne ind og hvor gør jeg af mit imagemap??

Jeg har et imagemap på mit første billede som ser sådan ud:

<IMG SRC="type1.gif" USEMAP="#type1" BORDER=0>
<MAP NAME="type1">
  <AREA SHAPE=RECT COORDS="29,10,328,25" HREF="test1"  ALT=""  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status=''; return true">
  <AREA SHAPE=RECT COORDS="29,30,329,45" HREF="test2"  ALT=""  OnMouseOut="window.status=''; return true"  OnMouseOver="window.status=''; return true">
</MAP>


Og siden er her:

<HTML>
<HEAD>

<TITLE>Drake Denmark</TITLE>

<SCRIPT LANGUAGE="JavaScript">
window.onerror=null;
window.defaultStatus = "Drake Denmark";

BrowserCheck = (((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3 )) || ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 )))
if (BrowserCheck)
{
  LinkImages = new Array();
  gifs = new Array ("type1", "type2", "type3", "type4", "type5", "type6", "type7", "type8", "type9", "type10");
for(N = 0; N <= 20; N++)
                  {
                    LinkImages[N]    = new Image();
                    LinkImages[N].src = "type/" + gifs[N] + ".gif";
                  }
for(N = 21; N <= 31; N++)
  {
    LinkImages[N]    = new Image();
    LinkImages[N].src = "type/" + gifs[N] + "_pil.gif";
  }
}
FirstTime = true;
CurrentImg = 0;
function RefleksShift (N,IMG)
{
  if (BrowserCheck)
  {
    if (N != CurrentImg)
        {
      document.images[N].src = "type/" + IMG + ".gif";
      if (!FirstTime)
      document.images[CurrentImg].src = "type/" + IMGtemp + ".gif";
      CurrentImg = N;
      FirstTime = false;
          IMGtemp = IMG;
        }
  }
}
function RefleksShift2 (N,IMG)
{
  if (BrowserCheck)
  {
    if (N != CurrentImg)
        {
      document.images[N].src = "type/" + IMG;
        }
  }
}
// End of Script -->
</SCRIPT>

</HEAD>
<BODY bgcolor="#FFFFD7" background="baggrund.gif">

<table align="center" cellspacing="0" cellpadding="0" border="0" width="601" height="215">
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type1.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type1.gif')"><img src="select_type1.gif" width=264 height=29 border=0 alt=""></a></td>
    <td rowspan="10"><img src="type/type_blank.gif" width=337 height=215 border=0 alt=""></td>
</tr>
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type2.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type2.gif')"><img src="select_type2.gif" width=264 height=21 border=0 alt=""></a></td>
</tr>
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type3.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type3.gif')"><img src="select_type3.gif" width=264 height=18 border=0 alt=""></a></td>
</tr>
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type4.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type4.gif')"><img src="select_type4.gif" width=264 height=20 border=0 alt=""></a></td>
</tr>
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type5.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type5.gif')"><img src="select_type5.gif" width=264 height=21 border=0 alt=""></a></td>
</tr>
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type6.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type6.gif')"><img src="select_type6.gif" width=264 height=20 border=0 alt=""></a></td>
</tr>
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type7.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type7.gif')"><img src="select_type7.gif" width=264 height=21 border=0 alt=""></a></td>
</tr>
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type8.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type8.gif')"><img src="select_type8.gif" width=264 height=19 border=0 alt=""></a></td>
</tr>
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type9.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type9.gif')"><img src="select_type9.gif" width=264 height=23 border=0 alt=""></a></td>
</tr>
<tr>
    <td><a href="#"  OnMouseOver="RefleksShift2(1,'type10.gif'), window.status=''; return true" OnMouseOut="RefleksShift2(1,'type10.gif')"><img src="select_type10.gif" width=264 height=23 border=0 alt=""></a></td>
</tr>
</table>

</BODY>
</HTML>

ses her:
http://skateboarding.dk/selection/

Håber en af jer kan hjælpe hurtigt, da jeg meget gerne snart vil se det virke.

Hvor mange point skal jeg slippe for at få en af jer hajer til at lave det her!???
Jeg synes at jeg roder lidt rundt i det her script!

Jeg ville godt lave det for dig - men har desværre ikke tid før i morgen eftermiddag - har en deadline i morgen formiddag!

henrik, ved din onMouseover skriver du

OnMouseOver="RefleksShift2(1,'type10.gif'), window.status='; return true"

Det er forkert!!

Det skal være

onMouseover="RefleksShift2(1,'type10.gif'); window.status=''; return true"

Bemærk forskellen mellem store og små bogstaver, samt at der er 2 ' efter window.status=

/Thor

Uhh, Det var godt nok lidt lang tid, men også et godt tilbud. Det vil jeg se frem til...

p.s. Hvis der er andre som har mere tid, så er det bare at slå til. Der er jo 200 P på højkant. I min desperation er jeg selfølgelig forhandlingsvillig om lidt ekstra!

Ok, tak Jumper, men hvad gør jeg med de ¤¤¤¤¤¤¤ links der skal være i de nye billeder, jeg er snart blevet blind på denne side?!?!?

Du vil have at der er links på underpunkterne i højre side, right?

finno, så brug justincase's kode, der virker ligesom det på aakjaers.dk men på en anden måde, eller skriv til mig på thor@larholm.dk

/Thor

Så havde jeg lidt tid.

Jeg gider ikke poste hele koden her, men jeg har lagt det ud på :
http://www.elvers.dk/eksperten/changing_map/

For at få den til at virke skal du fjerne den linie der hedder :
        alert(maps[curImg].links[num])
Og fjerne de to // fra den næste linie.

Og så selvfølgelig indsætte de rigtige link i :
maps[1] = new map();
maps[1].links[1] = "link1_1.htm";
maps[1].links[2] = "link1_2.htm";

Hvor maps[1].links[1] er linket for det første punkts (racks) første underpunkt(Single and twin fibre cables) osv.

Hvi du er i tvivl om noget, så spørg endelig

:)

JustinCase

THANX, det var dejligt....