webForumDet fria alternativet

Meny med mouseover där vald länk/knapp förblir mouseoverfärg???

JavaScript

6 svar · 611 visningar · startad av richi_f

Medlem sedan apr. 2004206 inlägg
Frågan#1

Hej!

Skulle vilja veta hur man gör på smidigaste sätt för att få detta:

Jag har en meny där jag har en mouseover som byter bild. Hur gör jag på enklaste sätt för att få den valda bildens mouseover att vara kvar tills besökaren väljer att trycka på nästa länk/bild.

Hoppas det är nån som förstår vad jag menar och hoppas att jag är i rätt forum! Går ju säkert att göra med css också men jag använder ju bilder som sagt med ett javascript...

Kanske nån som har en länk till en sida där detta finns?

Tack på förhand!

Mvh,
Richard

Medlem sedan aug. 20039 340 inlägg
#2

http://www.webforum.nu/showthread.php?s=&postid=836353#post836353
Ta dig en titt på det skriptet. Det är kanske en början iaf. Om du specificerar dig mer alt. visar nuvarande kod kan jag kanskae fixa nåt bättre.

Medlem sedan apr. 2004206 inlägg
#3

Vad snällt!

Hej!

Vore kul och se vad du kan få till!

Mvh,
Richard

Såhär ser det ut nu:

<!--S&aring;lla bort dem sin inte st&ouml;djer 1.1 dvs Ns 2 samt MSIE 3-->
<SCRIPT TYPE="text/javascript" language="JavaScript">

var browserok=false;

</script>

<!--H&auml;r f&aring;ngar vi upp dem som st&ouml;djer 1.1-->
<!--I 1.1 finns bl.a Array och Image som inte NS 2 och MSIE 3 st&ouml;djer-->
<SCRIPT TYPE="text/javascript" language="JavaScript1.1">

var browserok=true;

</script>

<!--Sj&auml;lva listan-->
<!--Enda du ska &auml;ndra h&auml;r &auml;r bildnamnen under loadImage l&auml;ngst ned-->
<SCRIPT TYPE="text/javascript" language="JavaScript">

var imageList=new Array();
var imageCount=0;
function loadImage(name,imageOut,imageOn){
if (browserok){
imageList[imageCount]=new Array(3);
imageList[imageCount][0]=name;
imageList[imageCount][1]=new Image();
imageList[imageCount][1].src=imageOut;
imageList[imageCount][2]=new Image();
imageList[imageCount][2].src=imageOn;
imageCount++;
}
}
function gotFocus(name){
if (browserok){
for (var i=0; i < imageList.length; i++){
if(imageList[i][0] == name){
document.images[name].src= imageList[i][2].src;
break;
}
}
}
}
function lostFocus(name){
if (browserok){
for (var i=0; i < imageList.length; i++){
if(imageList[i][0] == name){
document.images[name].src= imageList[i][1].src;
break;
}
}
}
}
loadImage("knapp0","images/nyheter.gif","images/nyheterrod.gif");
loadImage("knapp1","images/startsidan.gif","images/startsidanrod.gif");
loadImage("knapp2","images/a-lag.gif","images/a-lagrod.gif");
loadImage("knapp3","images/b-lag.gif","images/b-lagrod.gif");
loadImage("knapp4","images/truppen.gif","images/truppenrod.gif");
loadImage("knapp5","images/p-14.gif","images/p-14rod.gif");
loadImage("knapp6","images/tipset.gif","images/tipsetrod.gif");
loadImage("knapp7","images/gastbok.gif","images/gastbokrod.gif");

</script>

<link REL=STYLESHEET HREF="tif_style.css" TYPE="TEXT/CSS">

</head>

<body bgcolor="#FFFFFF" text="#000000" topmargin=0>
<table width="10%" border="0" cellspacing="0" cellpadding="0" align="center" topmargin="0">
  <tr>
    <td><img src="images/vanstermeny.gif" width="60" height="17"></td>

    <td><a href="default.asp?p=nyheter" target="main" onMouseOver="gotFocus('knapp0'); window.status='Startsidan'; return true" onMouseOut="lostFocus('knapp0')"> 
      <img src="images/nyheter.gif" width="74" height="17" BORDER=0 name="knapp0"></a></td>

osv..............

Medlem sedan aug. 20039 340 inlägg
#4

Så här gör du:

  1. Byt ut skripttaggen mot följande tagg:
<script type="text/javascript">
var imageList=new Array();
var imageCount=0;
function loadImage(name,imageOut,imageOn){
  imageList[name] = []
  imageList[name].imageout = new Image();
  imageList[name].imageout.src = imageOut;

  imageList[name].imageon = new Image();
  imageList[name].imageon.src = imageOn;
}

function gotFocus(name){
  for (i in imageList){
  if (document.images[i]){
    var timg;
    if (i == name)
      timg = imageList[i].imageon.src;
    else
      timg = imageList[i].imageout.src;
  tl=document.getElementById(i + "_link");

  if (document.getElementById(i + "_link").href == [b]parent.frames["main"].location.href [/b])
    timg = imageList[i].imageon.src;

  if (document.images[i].src != timg)
    document.images[i].src = timg;
  }
  }
}
function lostFocus(name){
  gotFocus("")
}
window.lostFocus = lostFocus;

// Bilddefinitioner
loadImage("knapp0","images/nyheter.gif","images/nyheterrod.gif");
loadImage("knapp1","images/startsidan.gif","images/startsidanrod.gif");
loadImage("knapp2","images/a-lag.gif","images/a-lagrod.gif");
loadImage("knapp3","images/b-lag.gif","images/b-lagrod.gif");
loadImage("knapp4","images/truppen.gif","images/truppenrod.gif");
loadImage("knapp5","images/p-14.gif","images/p-14rod.gif");
loadImage("knapp6","images/tipset.gif","images/tipsetrod.gif");
loadImage("knapp7","images/gastbok.gif","images/gastbokrod.gif");

</script>

Skriptet ser lite annorlunda ut, men fungerar på samma sätt. Dock var jag inte säker på hur ditt frameset ser ut, men jag antar att du använder normala frames och att main ligger där. Skulle du använda en iframe eller nåt annat, så får du posta den koden.

  1. Lägg till följande snutt i body:
<body [b]onload="lostFocus();"[/b] ...
  1. Sen måste du lägga till id för alla länkar som ser ut som följer: Först tillhörande bilds namn sedan _link, exempel
<a [b]id="knapp0_link"[/b] ... href="default.asp?p=nyheter">
<img [b]name="knapp0"[/b]>

onmouseover och onmouseout-raderna eller något annat behöver inte ändras.

  1. Gör följande ändring i frametaggen för main:
<frame name="main" src="default.asp?P=nyheter" [b]onload="frames['meny'].window.lostFocus();"[/b]>

Där du byter ut 'meny' mot menyframens namn.

Så ska det funka! §e
Skulle det ändå inte funka får du skicka en adress till sidan så jag får kolla hur den ser ut "live".

Medlem sedan apr. 2004206 inlägg
#5

Tack så hemskt mycket! Men....

Hej!

Tack så jättemycket för att du lägger ner tid!

Dock har jag inte fått det att fungera. Den säger att det är nåt fel i meny.html, rad 42.. Det kan vara nåt enkelt fel eftersom jag är trött nu men men...

här är en länk:
http://tiftest.preztige.se/

En fråga: Vad är det för skillnad mellan vanliga frames och iframes när det gäller detta script? Du skrev nåt om det...?

Tack tack tack!

Mvh,
Richard

Här är index-filen. Allt annat bör du ju se genom att högerklicka...

<html>
<head>
<title>Tannefors IF .com<</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<frameset rows="*,80" frameborder="NO" border="0" framespacing="0" MARGINWIDTH="0" MARGINHEIGHT="0"> 

  <frameset rows="98,18,*" frameborder="NO" border="0" framespacing="0" cols="*" MARGINWIDTH="0" MARGINHEIGHT="0"> 

    <frame src="top.html" MARGINWIDTH="0" MARGINHEIGHT="0" scrolling="NO" noresize>

    <frame name="meny" scrolling="NO" noresize src="meny.html" onload="frames['meny'].window.lostFocus();" MARGINWIDTH="0" MARGINHEIGHT="0">

    <frameset cols="90,*" frameborder="NO" border="0" framespacing="0" MARGINWIDTH="0" MARGINHEIGHT="0"> 

      <frame name="leftFrame" scrolling="NO" noresize src="vanstermain.html" MARGINWIDTH="0" MARGINHEIGHT="0">

      <frameset cols="*,90" frameborder="NO" border="0" framespacing="0" MARGINWIDTH="0" MARGINHEIGHT="0"> 

        <frame name="main" src="http://richard.franzon.info/db/tif/default.asp" MARGINWIDTH="0" MARGINHEIGHT="0">

        <frame name="rightFrame" scrolling="NO" noresize src="hogermain.html" MARGINWIDTH="0" MARGINHEIGHT="0">

      </frameset>

    </frameset>

  </frameset>

  <frame name="bottomFrame" scrolling="NO" noresize src="ner.html" MARGINWIDTH="0" MARGINHEIGHT="0" frameborder="NO" border="0" framespacing="0">

</frameset>

<noframes> 

<body bgcolor="#FFFFFF" text="#000000">

</body>

</noframes> 

</html>
Medlem sedan aug. 20039 340 inlägg
#6
onload="frames['meny'].window.lostFocus();"

Först en kommentar. Denna snutt ska ligga i mainframes frame-tagg, inte i menyframen som nu.

Felet på rad 42 är inte ett fel i skriptet, utan beror på att inte alla sidor ligger på samma domän. Ramarna kan då inte kommunicera med varandra.
Lösningen är att lägga över allt någonstans under http://richard.franzon.info/ så att ramarna kan kommunicera.

http://tiftest.preztige.se/ kan du lägga en enkel framesida som ligger som behållare till den andra, t ex:

 
  <frameset rows="*,1" framespacing="0" border="0" frameborder="NO">
    <frame src="http://richard.franzon.info/db/tif/index.asp" name="wrapper" scrolling="auto" noresize>
  </frameset>
Medlem sedan apr. 2004206 inlägg
#7

Nu funkar det!

Hej!

Nu fungerar det klockrent! Tack så mycket!

En liten fråga bara:
Vad är det för skillnad mellan vanliga frames och iframes när det gäller detta script? Du skrev nåt om det i ett tidigare inlägg?

Tack än en gång!
Mvh,
Richard

279 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
133 ms — deklarationer (db)
0 ms — hämta statistik (cache)
142 ms — hämta tråd, inlägg och bilagor (db)
131 ms — ändringar (db)