Kā nomainīt fonu linkam?

[Sephy]

Sveiki te mans kods!

 

<script>
function changeStyle()
{
document.getElementById("leftstyle").style.backgroundImage="url(bildes/topm_act.png)";
}
function changeStyleBack()
{
document.getElementById("leftstyle").style.backgroundImage="";
}
</script>

<div id="left_sidebar">
 <div id="menuleft">
 <div id="AccordionContainer" class="AccordionContainer">
  <div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
<a id="leftstyle" href="#">Tituls</a>
</div>
  </div>
  <div id="Accordion1Content" class="AccordionContent" onclick="changeImage()">
<a id="leftstyle" href="#" onmouseover="changeStyle()" onmouseout="changeStyleBack()">derp</a>
<a id="leftstyle" href="#" onmouseover="changeStyle()" onmouseout="changeStyleBack()">hurr</a>
  </div>
  <a id="leftstyle" href="#">Sekcija2</a>
 </div>
 </div>
</div>

Problema ir tur ka maina stilu nevis tam linkam kura ir changestyle, bet gan Titul linkā ;/

Izskatās ka maina tikai pirmajā leftstyle un viss, kā var uzlikt lai esošajā leftstyle maina linku!!

Edited July 29, 2011 by Sephy

[nikidijs]

No JS gan diezgan maz "rubiju", bet šķiet ka katra elementa ID ir jābūt unikālam. t.i nevar būt vairāki elementi ar vienādu ID

 

Garāks gan sanāktu pieraksts bet, varētu arī šādi:

<a href="#" onmouseover="this.style.backgroundImage='url(bildes/topm_act.png)'" onmouseout="this.style.backgroundImage=''">derp</a>
<a href="#" onmouseover="this.style.backgroundImage='url(bildes/topm_act.png)'" onmouseout="this.style.backgroundImage=''">hurr</a>

 

Kautkā laikam varēja arī ar document.getelementbyNames('leftstyle').style... vai document.all.leftstyle.style...

tikai lai tiem kam vajag mainīt backu "leftstyle" ir nevis ID bet gan name.

 

Tiesa gan man pašam nav diezko veicies ar šiem variantiem

Edited July 29, 2011 by nikidijs

[daGrevis]

Bet kāpēc Tu nevari, vienkārši, noņemt vispār to ID nost (jā, nevar atkārtoties)... un:

 

 

function changeBack() {

 this.style.backgroundImage = '';

}

[Grey_Wolf]

1. kā jau tika minēts ID jābūt unikālam !!!

2. padod funkcijai to ID

 

<script>
function changeStyle(mainigais)
{
document.getElementById(mainigais).style.backgroundImage="url(bildes/topm_act.png)";
}
function changeStyleBack(mainigais)
{
document.getElementById(mainigais).style.backgroundImage="";
}
</script>
<a id="leftstyle" href="#" onmouseover="changeStyle(this.id)" onmouseout="changeStyleBack(this.id)">derp</a>
<a id="leftstyle" href="#" onmouseover="changeStyle(this.id)" onmouseout="changeStyleBack(this.id)">hurr</a>

 

tas tas uz ātru roku ...

[indoom]

kāpēc divas funkcijas, un priekš kam id, ja reāli netiek nekam izmantots?

<script type="text/javascript">
function changeStyle(el, off) {
 el.style.backgroundImage = !off ? "url(bildes/topm_act.png)" : "";
}
</script>

<a href="#" onmouseover="changeStyle(this)" onmouseout="changeStyle(this, 1)">derp</a>
<a href="#" onmouseover="changeStyle(this)" onmouseout="changeStyle(this, 1)">hurr</a>

Edited August 2, 2011 by indoom

[Sephy]

Indoom variants man vislabak strada un tas ari vis īsākais izmantošu to! Paldies!

[codez]

1. jQuery

 

2. konkrēti šo uzdevumu var atrisināt bez js:

http://jsfiddle.net/An6p3/2/

 

html:

<a class="mylink" href="#">HELLO</a><br />
<a class="mylink" href="#">HELLO</a><br />
<a class="mylink" href="#">HELLO</a><br />

css:

a.mylink:hover{   
 background:url(http://www.ferdychristant.com/blog//resources/Fun/$FILE/shadedbutton11.gif);
}

Edited August 2, 2011 by codez

[Sephy]

Papildjautājums! Vai var pielikt, lai nomaina background ne tikai linkam, bet arī kādam citam elementam? Piemeram leftsidebar backgroundu nomainit!

 

function changecolor(el,off){
 el.style.color = !off ? '#90003a': '';
 left_sidebar.style.backgroundImage = !off ? "url(bildes/bk/bildes.png)" : "";
}

 

Šitā te nestrādā ;/

Edited August 5, 2011 by Sephy

[codez]

http://jsfiddle.net/rw5es/

 

js:

$('.mylink').hover(function(){
$(this).stop(true,true).animate({backgroundColor:'#f00'},500);
$('.leftsidebar').stop(true,true).animate({backgroundColor:$(this).attr('color')},1500);
},function(){
$(this).stop(true,true).animate({backgroundColor:'#fff'},500);
$('.leftsidebar').stop(true,true).animate({backgroundColor:'#fff'},1500);
});

 

html:

 

<div class="leftsidebar">left sidebar</div>
<div class="content">
<a class="mylink" color="#f00" href="#">HELLO</a>
<a class="mylink" color="#0f0"  href="#">HELLO</a>
<a class="mylink" color="#00f"  href="#">HELLO</a>
</div>
<div class="clear"></div>

[Sephy]

Šoreiz hover nederes, jo tam backgroundam jamainas tikai tad kad uzspiests ir tas links.

[daGrevis]

Nu tad nomaini 'hover' uz 'click'.

[Sephy]

man vajag abus divus reize, hover pamaina krasu kad uziet uz linka(pasham linkam), bet uzpiežot mainas bk

[daGrevis]

Neesmu iebraucis problēmā, bet:

 

 

$('body').click(function () {

   if ($(this).css(...) == 'red') {

       $(this).css(..., ...);

   } else {

       $(this).css(..., ...);

   }

   $('#foo').css(...); // Naggagaga.

}

[indoom]

parādi kāda tagad ir html struktūra un uz kuru linku vajadzīgs click? Un noteikti jau arī, ja uz citu uzklikšķina, tad iepriekšējam noņemas tā krāsa un bg? Un vai izmanto jquery?