webForumDet fria alternativet
Logga in / Bli medlem

Bildbyte, Aktiv sida osv.

JavaScript

25 svar · 900 visningar · startad av MickeA.com

MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
Frågan#1

Hej

Har sökt och sökt efter ett script för bildväxling.

Mitt problem är följande, har tre bilder för varje länk, en OnMouseOut, en OnMouseOver och en för Aktiv bild.

När jag för musen över ska den byta till bild1, när man håller musen över ska bild2 visas och slutligen när man klickar på knappen ska bild3 visas och där fastna tills man trycker på nästa knapp.

Har provat med ett av Jojoxx's script för bildväxling, men har inte fått det att funka i mitt fall.

Så, nu vänder jag mig hit till er som hanterar Javascript så pass bra att ni tror det finns en lösning på det här.

Tack för hjälpen !

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#2

Alltså:
Normal: Bild 0
Hover: Bild 1
Hover ett längre tag: Bild 2
Klick: Bild 3

Annars tycker jag du ska kolla på http://www.webforum.nu/showthread.php?s=&threadid=101914&forumid=24 som handlar om nästan samma problem.

MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
#3

nitro2k01 skrev:

Annars tycker jag du ska kolla på http://www.webforum.nu/showthread.php?s=&threadid=101914&forumid=24 som handlar om nästan samma problem.

Har som sagt redan sökt massor, hittat blandannat den länk du ovan visar, men får inte till det där heller.

Sen har du missuppfattat lite, såhär ska det vara:
--------------------------------------------
Bild0 = Normal
Bild1 = Över
Bild2 = Klick (Ska 'fastna' tills man trycker på nästa)
--------------------------------------------

Tydligare?

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#4

Kommer sidan (Sidan som innehåller själva knapparna.) laddas om mellan? Eller ligger det typ i en topframe som inte laddas om?
Och finns det flera knappar på samma sida, eller är det en i taget?

MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
#5

Det är en sida som kommer laddas om efter varje tryckning, så man får skicka med den aktiva knappens id i en querystring el. likn. för att sidan ska 'komma ihåg' vilken knapp som ska vara aktiv.

Totalt är det minst 6 knappar som detta ska fungera på, för alla knappar ingår i samma meny.

Vore kanon om du kunde komma på ngt ;) Tack !

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#6

Skulle det funka att få ut aktiv sida från en frames url?

MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
#7

nitro2k01 skrev:

Skulle det funka att få ut aktiv sida från en frames url?

Hmm, tror inte det, men det bör gå att göra på ngt liknande sätt som Jojoxx "Meny med Bildväxling 2".

Där har jag gjort så att id't till den aktiva bilden finns med i body onLoad som en funktion:

<body onload="acti('pic<%=FixSQL(Request.Querystring("btn"))%>_');">

En url till en viss sida kan se ut såhär:

[url]http://mickea.dyndns.org/him/default.asp?p=ment_trn&btn=4&pNr=2_1[/url]

Där '&btn=' anger vilken av knapparna på huvudmenyn som ska vara aktiv.

Det som gör att jag inte kan använda samma script som på huvudmenyn, är att i det scriptet kan jag bara ha en bild som aktiv bild, fast den visas på alla knappar, om du färst¨år vad jag menar.

Allt det här är till en submeny, som ska finnas med på sidan som jag länkar till ovan.

Använder ASP, så skicka id fram och tillbaks i querystrings är inga problem.

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#8

Mycket frågor här...
Är det den sidan som du vill anpassa? Är det bakgrundsfärgen du vill ändra eller ska det vara en bild i slutändan? När man hovrar den aktiva bilden, ska den hovrade bilden visas då eller, ska den stanna kvar i ursprungsläget(Aktiv mao)?

MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
#9

Såhär ska det vara:

En submeny med minst sex knappar, vi kan kalla en av dessa för 'knapp1'.

När man kommer till sidan, är knapp1 aktiv, för det är den första sida man hamnar på.

När jag håller musen över knapp2, då ska den byta till en annan bild, när jag slutligen klickar på knapp2, laddas sidan om, den aktiva bilden för knapp2 visas och knapp1 återgår till ursprungsbilden.

Är du med nu då? ;)

[ red]
Kan tillägga att om man hovrar en redan aktiv knapp ska det inte hända ett jota ;)
[ /red]

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#10

Here we go. HTML-koden genereras av javascriptet, så att lägga till och ta bort knappar är en baggis!

 
<script language="javascript" type="text/javascript">

function parseQuery(){
 if (location.search) {
  var params = location.search.substring(1, location.search.length).split('&');
  var result = new Array ();
  for (k in params) {
   queryparts=params[k].split('=');
   eval('result.' + queryparts[0] + ' = "' + queryparts[1] + '"');
  }
  return result;
 }
 return new Array();
}

p = parseQuery();
if (p["activeitem"])
  activeitem = p["activeitem"];
else
  activeitem = "knapp0";

</script>

<script>
imageList=[];

function loadImage(name, imageOn, imageOut, imageAct){
  imageList[name] = []

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

  imageList[name].imageout = new Image();
  imageList[name].imageout.src = imageOut;

  imageList[name].imageact = new Image();
  imageList[name].imageact.src = imageAct;

  cImg = (name == activeitem) ? imageList[name].imageact.src : imageList[name].imageout.src;

  document.write ('<a href="?activeitem=' + name + '" onmouseover="hoverImage(\'' + name + '\');" onmouseout="hoverImage(\'\')" ><img name="' + name + '" src="' + cImg + '" /></a>');
}

function hoverImage(name){
  for (i in imageList)
    if (i!=activeitem)
    if (i==name)
      document.images[i].src = imageList[i].imageon.src;
    else
      document.images[i].src = imageList[i].imageout.src;
}
</script>

<script>
loadImage("knapp0","images/nyheter.gif", "images/nyheterrod.gif", "images/nyheterblue.gif");
loadImage("knapp1","images/startsidan.gif", "images/startsidanrod.gif", "images/startsidanblue.gif");
loadImage("knapp2","images/a-lag.gif", "images/a-lagrod.gif", "images/a-lagblue.gif");
loadImage("knapp3","images/a-lag.gif", "images/a-lagrod.gif", "images/a-lagblue.gif");
loadImage("knapp4","images/a-lag.gif", "images/a-lagrod.gif", "images/a-lagblue.gif");
loadImage("knapp5","images/a-lag.gif", "images/a-lagrod.gif", "images/a-lagblue.gif");
</script>
nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#11

Här kommer en zip med bilderna inkluderade. Sorry för namnen för övrigt, men jag bara tog bilder jag råkade ha till hands.

activebutton.zip (9 kB)
MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
#12

Men, det ser ju lysande ut. Tack så hemskt mkt, jag testar lite här nu och återkommer om jag inte får det att funka ;)

MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
#13

Hej igen

Har lite problem här, det funkar inte alls. Det här med att allt skrivs ut på en gång funkar inte, jag ska ha varje knapp i varsin cell, i nuläget skrivs inget alls ut.

Att funktionen skriver ut länk mm. är inget bra i mitt fall, har du lust att skriva om scriptet så att den kallar på grejjerna direkt?

Typ:

<a href="?btn=blabla"><img src="bild0.gif" onMouseOver="hover('bild1.gif');"></a>

osv...?

Dels blir det lättare för mig att tolka koden och sen ser det framför allt snyggare ut, jag har all javascript i en js-fil som jag inkluderar.

Tack!

MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
#14

Nu har jag löst det, det var SBS ;)

Allt funkar iaf. och verkar helschysst, nu är det Simpsons, men sen ska jag mecka vidare ;=)

Tack !!!

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#15

Du menar en td med onclick?

 
// EDIT: Det ska vara escapetecken framför vissa av citationstecknena. Orkar inte pula med det, men klicka på citera inlägg för att se hur det ser ut i verkligheten.
document.write ('<td onclick=" window.open(\'?activeitem=' + name + '\','_self')" onmouseover="hoverImage('' + name + '');" onmouseout="hoverImage('')" ><img name="' + name + '" src="' + cImg + '" /></td>');

...

<script>
document.write("<table cellpadding=0 cellspacing=0 border=0><tr>");

loadImage("knapp0","images/nyheter.gif", "images/nyheterrod.gif", "images/nyheterblue.gif");
loadImage("knapp1","images/startsidan.gif", "images/startsidanrod.gif", "images/startsidanblue.gif");
loadImage("knapp2","images/a-lag.gif", "images/a-lagrod.gif", "images/a-lagblue.gif");
loadImage("knapp3","images/a-lag.gif", "images/a-lagrod.gif", "images/a-lagblue.gif");
loadImage("knapp4","images/a-lag.gif", "images/a-lagrod.gif", "images/a-lagblue.gif");
loadImage("knapp5","images/a-lag.gif", "images/a-lagrod.gif", "images/a-lagblue.gif");
document.write("</tr></table>");
</script>
nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#16

MickeA.com skrev:

Nu har jag löst det, det var SBS ;)

Jag kanske är dum, men vad är SBS?

Peter SMedlem sedan dec. 20025 483 inlägg
#17

http://susning.nu/Hackerslang/SBS

;)

MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
#18

Peter S skrev:

http://susning.nu/Hackerslang/SBS

HeHe, helt rätt.

Nu har därimot ett helt nytt problem. Sidan blir inte validerad schysst längre, enligt W3's HTML4.01.

<!-- Sub Navigation Start -->
<table cellpadding="0" cellspacing="0">
<tr>
<script>
loadImage("k2_1","pics/btns/subItems/2_1over.gif", "pics/btns/subItems/2_1.gif", "pics/btns/subItems/2_1on.gif", "s_sub", "ment_trn", "2_1.htm", "4");
loadImage("k2_2","pics/btns/subItems/2_2over.gif", "pics/btns/subItems/2_2.gif", "pics/btns/subItems/2_2on.gif", "s_sub", "ment_trn", "2_2.htm", "4");
loadImage("k2_3","pics/btns/subItems/2_3over.gif", "pics/btns/subItems/2_3.gif", "pics/btns/subItems/2_3on.gif", "s_sub", "ment_trn", "2_3.htm", "4");
loadImage("k2_4","pics/btns/subItems/2_4over.gif", "pics/btns/subItems/2_4.gif", "pics/btns/subItems/2_4on.gif", "s_sub", "ment_trn", "2_4.htm", "4");
loadImage("k2_5","pics/btns/subItems/2_5over.gif", "pics/btns/subItems/2_5.gif", "pics/btns/subItems/2_5on.gif", "s_sub", "ment_trn", "2_5.htm", "4");
loadImage("k2_6","pics/btns/subItems/2_6over.gif", "pics/btns/subItems/2_6.gif", "pics/btns/subItems/2_6on.gif", "s_sub", "ment_trn", "2_6.htm", "4");
</script>
</tr>
</table>
<!-- Sub Navigation Slut -->

Felet / flen jag får är:

Line 164, column 9: required attribute "TYPE" not specified
<script>
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. 

Line 164, column 9: document type does not allow element "SCRIPT" here; missing one of "TH", "TD" start-tag
<script>
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element menetioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. 
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Så, hur ska jag lösa den här biffen? Har provat ett gäng olika saker, men inget funkar.

Tack !

nitro2k01s avatarnitro2k01Medlem sedan aug. 20039 340 inlägg
#19

Det första problemet ä lätt löst: lägg till type="text/javascript" till alla script-taggar.
För att klara det andra problemet måste jag se hur din kod ser ut (Hela sidan).

MickeA.coms avatarMickeA.comMedlem sedan feb. 20034 441 inlägg
#20

nitro2k01 skrev:

Det första problemet ä lätt löst: lägg till type="text/javascript" till alla script-taggar.

- Nej, blir ingen skillnad :/

nitro2k01 skrev:

För att klara det andra problemet måste jag se hur din kod ser ut (Hela sidan).

<!--#include file="css/funcs.asp"-->
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width:35px;"><img src="pics/spacer.gif" border="0" alt="0"></td>
<td class="subav">

<!-- Sub Navigation Start -->
<table cellpadding="0" cellspacing="0">
<tr>
<%
Select Case Request.Querystring("sP")
	Case "ment_trn"
		If Request.Querystring("pId") = "" Then
			strP = "2_1.htm"
		Else
			strP = Request.Querystring("pId")
		End If
		strSp = ""%>
		<script type="text/javascript">
		loadImage("k2_1","pics/btns/subItems/2_1over.gif", "pics/btns/subItems/2_1.gif", "pics/btns/subItems/2_1on.gif", "s_sub", "ment_trn", "2_1.htm", "4");
		loadImage("k2_2","pics/btns/subItems/2_2over.gif", "pics/btns/subItems/2_2.gif", "pics/btns/subItems/2_2on.gif", "s_sub", "ment_trn", "2_2.htm", "4");
		loadImage("k2_3","pics/btns/subItems/2_3over.gif", "pics/btns/subItems/2_3.gif", "pics/btns/subItems/2_3on.gif", "s_sub", "ment_trn", "2_3.htm", "4");
		loadImage("k2_4","pics/btns/subItems/2_4over.gif", "pics/btns/subItems/2_4.gif", "pics/btns/subItems/2_4on.gif", "s_sub", "ment_trn", "2_4.htm", "4");
		loadImage("k2_5","pics/btns/subItems/2_5over.gif", "pics/btns/subItems/2_5.gif", "pics/btns/subItems/2_5on.gif", "s_sub", "ment_trn", "2_5.htm", "4");
		loadImage("k2_6","pics/btns/subItems/2_6over.gif", "pics/btns/subItems/2_6.gif", "pics/btns/subItems/2_6on.gif", "s_sub", "ment_trn", "2_6.htm", "4");
		</script><%
	Case "our_pro"
		If Request.Querystring("pId") = "" Then
			strP = "3_1.htm"
		Else
			strP = Request.Querystring("pId")
		End If
		strSp = ""%>
		<script type="text/javascript">
		loadImage("k2_1","pics/btns/subItems/3_1over.gif", "pics/btns/subItems/3_1.gif", "pics/btns/subItems/3_1on.gif", "s_sub", "our_pro", "3_1.htm", "7");
		loadImage("k2_2","pics/btns/subItems/3_2over.gif", "pics/btns/subItems/3_2.gif", "pics/btns/subItems/3_2on.gif", "s_sub", "our_pro", "3_2.htm", "7");
		loadImage("k2_3","pics/btns/subItems/3_3over.gif", "pics/btns/subItems/3_3.gif", "pics/btns/subItems/3_3on.gif", "s_sub", "our_pro", "3_3.htm", "7");
		loadImage("k2_4","pics/btns/subItems/3_4over.gif", "pics/btns/subItems/3_4.gif", "pics/btns/subItems/3_4on.gif", "s_sub", "our_pro", "3_4.htm", "7");
		loadImage("k2_5","pics/btns/subItems/3_5over.gif", "pics/btns/subItems/3_5.gif", "pics/btns/subItems/3_5on.gif", "s_sub", "our_pro", "3_5.htm", "7");
		loadImage("k2_6","pics/btns/subItems/3_6over.gif", "pics/btns/subItems/3_6.gif", "pics/btns/subItems/3_6on.gif", "s_sub", "our_pro", "3_6.htm", "7");
		loadImage("k2_7","pics/btns/subItems/3_7over.gif", "pics/btns/subItems/3_7.gif", "pics/btns/subItems/3_7on.gif", "s_sub", "our_pro", "3_7.htm", "7");
		</script><%
	Case Else
		Response.reDirect("default.asp?p=404")
End Select
%>
</tr>
</table>
<!-- Sub Navigation Slut -->

</td>
<td style="width:35px;"><img src="pics/spacer.gif" border="0" alt="0"></td>
</tr>
</table>
</td>
</tr>
<tr>

<!-- Bild Start -->
<td class="text"><%Server.Execute("pages/" & strP)%></td>
<!-- Bild Slut -->

<td style="width: 25px;"><img src="pics/spacer.gif" border="0" alt=""></td>
<td class="text" style="padding-top: 100px;">
<iframe src="s_inc.asp?sInc=<%=strP%>" scrolling="yes" frameborder="0" style="width: 300px; height: 200px; filter:alpha(opacity=100); -moz-opacity:1.0"></iframe>
</td>
</tr>
</table>
280 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
128 ms — deklarationer (db)
0 ms — hämta statistik (cache)
149 ms — hämta tråd, inlägg och bilagor (db)
124 ms — ändringar (db)