Bildbyte, Aktiv sida osv.

25 svar · 900 visningar · startad av MickeA.com 26 maj 2004

MickeA.comMedlem sedan feb. 20034 441 inlägg

26 maj 2004 15:16#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 !

nitro2k01Medlem sedan aug. 20039 342 inlägg

26 maj 2004 15:31#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.comMedlem sedan feb. 20034 441 inlägg

26 maj 2004 15:35#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?

nitro2k01Medlem sedan aug. 20039 342 inlägg

26 maj 2004 15:41#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.comMedlem sedan feb. 20034 441 inlägg

26 maj 2004 15:44#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 !

nitro2k01Medlem sedan aug. 20039 342 inlägg

26 maj 2004 15:46#6

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

MickeA.comMedlem sedan feb. 20034 441 inlägg

26 maj 2004 15:52#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.

nitro2k01Medlem sedan aug. 20039 342 inlägg

26 maj 2004 15:56#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.comMedlem sedan feb. 20034 441 inlägg

26 maj 2004 16:00#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]

nitro2k01Medlem sedan aug. 20039 342 inlägg

26 maj 2004 16:29#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>

nitro2k01Medlem sedan aug. 20039 342 inlägg

26 maj 2004 16:33#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.comMedlem sedan feb. 20034 441 inlägg

26 maj 2004 16:39#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.comMedlem sedan feb. 20034 441 inlägg

26 maj 2004 16:51#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.comMedlem sedan feb. 20034 441 inlägg

26 maj 2004 17:03#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 !!!

nitro2k01Medlem sedan aug. 20039 342 inlägg

26 maj 2004 17:06#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>

nitro2k01Medlem sedan aug. 20039 342 inlägg

27 maj 2004 10:33#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

27 maj 2004 10:54#17

http://susning.nu/Hackerslang/SBS

;)

MickeA.comMedlem sedan feb. 20034 441 inlägg

27 maj 2004 15:16#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 !

nitro2k01Medlem sedan aug. 20039 342 inlägg

27 maj 2004 16:22#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.comMedlem sedan feb. 20034 441 inlägg

27 maj 2004 16:53#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>