PHPportalen :: Visa Ämne - Byt flera bilder utan id med mouseover?

Byt flera bilder utan id med mouseover?

PHPportalen Forum Index » HTML/CSS/JavaScript/Design

Lägg ett bokmärke på hela tråden

Visa föregående ämne :: Visa nästa ämne

Startad av:

Meddelande

offline

Medlem i: 1795 dagar

Status: Offline

#623915

Skrivet: 2009-02-12 16:27 Ämne: Byt flera bilder utan id med mouseover?

Hej undrar ifall det går att lösa mouseover bildbyte på flera post knappar som har samma id. Här följer mitt exempel så ni förstår bättre: Jag har 3st knappar med samma name. <input type="image" src="none.gif" name="vote" class="none" onMouseOver="this.className='star'" onMouseOut="this.className='none'" value="1"> <input type="image" src="none.gif" name="vote" class="none" onMouseOver="this.className='star'" onMouseOut="this.className='none'" value="2"> <input type="image" src="none.gif" name="vote" class="none" onMouseOver="this.className='star'" onMouseOut="this.className='none'" value="3"> I css'en har jag sedan: .none { border: none; background-image: url('none.gif'); background-repeat: no-repeat; cursor:pointer; } .star { border: none; background-image: url('star.png'); background-repeat: no-repeat; cursor:pointer; } Istället för att bara ha mouseover på den knapp man håller musen över vill jag att det aktiveras även på de knappar som är tidigare. Alltså om jag håller musen över knapp2 så byter även knapp1 bild fast inte knapp3. Med fantasikod skulle jag alltså vilja ha något i stil med: onMouseOver="this.className='star';this.className.none2='star'" vilket då innebär att jag får ha 5st likadana .none styles, vilket inte hade varit ett problem men saken är ju den att man inte kan anropa de andra knapparna med ex: this.className.none2, så hur gör man istället?

Till toppen på sidan

atquick

Medlem i: 1575 dagar

Status: Offline

#623921

Skrivet: 2009-02-12 16:48 Ämne:

Med id antar jag att du menar namn (name) i det här fallet Wink

PHP:

function myFunction(e,class) {

var trigger = e.target; //e.srcElement för IE

var mybtnElements = document.getElementsByName("myBtn");

for(var n = 0; n < mybtnElements.length; n++) {

mybtnElements[n].className = class;

if(mybtnElements[n] == trigger) //Är det knappen vi har musen över

break;

}

10:

}

11:

12:

//...

13:

14:

15:

Till toppen på sidan

offline

Medlem i: 1795 dagar

Status: Offline

#623978

Skrivet: 2009-02-12 23:08 Ämne:

Hehe självklart menar jag name, fy fan vilken snygg kodbit, fungerar ju klockrent! Men hur fasen får jag det att fungera även i IE? Försökte med följande men utan resultat..

KOD:

function showStar(e,class) {

if (e.srcElement) var trigger = e.srcElement; // Internet Explorer

else if (e.target) var trigger = e.target; // Mozilla (e.g. Firefox)

var voteElements = document.getElementsByName("vote");

for(var n=0; n < voteElements.length; n++) {

voteElements[n].className = class;

if(voteElements[n] == trigger) //Är det knappen vi har musen över

break;

}

10:

}

Tackar och bugar atquick

Till toppen på sidan

atquick

Medlem i: 1575 dagar

Status: Offline

#623982

Skrivet: 2009-02-12 23:19 Ämne:

Inte säker, men testa att lägga in följande i början av funktionen

PHP:

if (!e)

var e=window.event;

Till toppen på sidan

offline

Medlem i: 1795 dagar

Status: Offline

#623990

Skrivet: 2009-02-12 23:46 Ämne:

hm.. det hände tyvärr inte så mycket, la alltså bara till det innan if och else satserna men det fungerar fortfarande bara i FF

Till toppen på sidan

atquick

Medlem i: 1575 dagar

Status: Offline

#623991

Skrivet: 2009-02-13 00:01 Ämne:

getElementsByName fungerar tydligen dåligt i internet explorer.

Du kan testa att göra något i stil med detta:

PHP:

function showStar(e,newClass) {

if (!e) var e=window.event;

if (e.srcElement) var trigger = e.srcElement; // Internet Explorer

else if (e.target) var trigger = e.target; // Mozilla (e.g. Firefox)

var rawElements = document.getElementsByTagName(trigger.tagName);

for(var n=0; n<rawElements.length; n++) {

var tagElement = rawElements[n];

10:

if(tagElement.getAttribute("name") == trigger.getAttribute("name"))

11:

tagElement.className = newClass;

12:

if(tagElement == trigger)

13:

break;

14:

}

15:

}

EDIT: felstavning på rad 11 Razz

EDIT2: AHHHHHH! Byter alla förekomster av class till newClass

Senast ändrad av atquick den 2009-02-13 02:21, ändrad totalt 2 gånger

Till toppen på sidan

offline

Medlem i: 1795 dagar

Status: Offline

#623998

Skrivet: 2009-02-13 00:53 Ämne:

mjo kanske är så men tyvärr så slutade funktionen helt att fungera med de nya ändringarna. Vad är egentligen trigger.tagName? ger det input som resultat eller? försökte även med getElementById("vote") men det fungerade inte heller... Några fler förslag?

Till toppen på sidan

atquick

Medlem i: 1575 dagar

Status: Offline

#624009

Skrivet: 2009-02-13 01:23 Ämne:

trigger.tagName ger taggen (dvs input). Jag använder den för att begränsa vilka element som vi letar efter vårat namn (name) i, det går lite snabbare än att gå igenom alla objekt som finns på sida Jag såg för övrigt att jag gjorde ett slarvfel på rad 11

Till toppen på sidan

offline

Medlem i: 1795 dagar

Status: Offline

#624011

Skrivet: 2009-02-13 01:33 Ämne:

Ah det låter vettigt har nog rätt många input taggar Missade att det var slarvfel men tyvärr så fungerar funktionen bara i FF även efter ändring av felet. Jag testade att lägga en alert(trigger); efter if och else satsen och fick ingen popup ruta i IE... så då borde det väl vara något med e.srcElement??

Till toppen på sidan

atquick

Medlem i: 1575 dagar

Status: Offline

#624012

Skrivet: 2009-02-13 02:23 Ämne:

Fick igång den i IE7 genom att byta namn på variabeln class till newClass, vet inte hur det är med övriga versionerna.

Till toppen på sidan

offline

Medlem i: 1795 dagar

Status: Offline

#624019

Skrivet: 2009-02-13 09:29 Ämne:

Aha där har vi det, synd att sådana skyddade namn inte får annan färg i editorn så man såg det direkt. Med newClass funkar även den gamla koden Tack som fan! snyggt kodat. Finns det några fördelar med att använda den slutgiltiga koden jämfört med den i inlägg 3? Den nya är ju något längre men den kanske fungerar i andra webbläsare med eller något? har själv bara FF och IE7.. Kanske har du även en lösning på ett gammalt problem jag haft http://www.phpportalen.net/viewtopic.php?t=102389 Återigen, tack så mycket!

Till toppen på sidan

atquick

Medlem i: 1575 dagar

Status: Offline

#624184

Skrivet: 2009-02-14 01:25 Ämne:

Typiskt att firefox inte reagerade på att jag använde ett skyddat namn Personligen tycker jag att du skall använda den första, men om du vill använda koden för andra element utanför de som stödjs i Javascript-standarden (ex. <p>, <div> etc.) kan det vara bättre att använda den andra så det fungerar under IE. Jag skrev ett svar på ditt gamla inlägg, du får svara om jag förstått ditt problem riktigt eller ej

Till toppen på sidan

offline

Medlem i: 1795 dagar

Status: Offline

#717595

Skrivet: 2011-12-08 20:28 Ämne:

Hej! tänkte försöka skaka liv i en gammal tråd genom att kolla med er vad som har förändrats när det gäller JavaScript i Internet Explorer 9?

Koden här som atquick skrev fungerar nämligen inte längre i IE9:

KOD:

function showStar(e,newClass) {

if (!e) var e=window.event;

if (e.srcElement) var trigger = e.srcElement; // Internet Explorer

else if (e.target) var trigger = e.target; // Mozilla (e.g. Firefox)

var voteElements = document.getElementsByName("vote");

for(var n=0; n < voteElements.length; n++) {

voteElements[n].className = newClass;

if(voteElements[n] == trigger) //Är det knappen vi har musen över

break;

10:

}

11:

}

Hur gör man så att funktionen triggas även i IE9?

Till toppen på sidan

offline

Medlem i: 1795 dagar

Status: Offline

#721449

Skrivet: 2012-03-08 22:17 Ämne:

Ingen som kan hjälpa mig att få funktionen att fungera i IE9?

Till toppen på sidan

Visa tidigare inlägg:

PHPportalen Forum Index » HTML/CSS/JavaScript/Design

Du kan inte skapa nya inlägg i det här forumet
Du kan inte svara på inlägg i det här forumet
Du kan inte ändra dina inlägg i det här forumet
Du kan inte ta bort dina inlägg i det här forumet
Du kan inte rösta i det här forumet
Du kan inte bifoga filer i detta forum
Du kan inte ladda ner filer från detta forum

Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic