Coding a Layout - Help!

How do you get like, hover over icons. So when you hover over something, the image changes. +rep.

#blah
{
background-image:url(images/nonhoverimg.gif);
width:x;
height:x;
}

#blah:hover
{
background-image:url(images/hoverimage.gif);
}

I dont quite understand as im having several hovers what I do
#text1
{
background-image:url(images/nonhoverimg.gif);
width:x;
height:x;
}

#text:hover
{
background-image:url(images/hoverimage.gif);
}
#text2
{
background-image:url(images/nonhoverimg.gif);
width:x;
height:x;
}

#text2:hover
{
background-image:url(images/hoverimage.gif);
}


?

erm just go to dynamicdrive.com there is loads on there.

Quote:

---

Originally Posted by Mickword

erm just go to dynamicdrive.com there is loads on there.

---

*** why when it can be done with css.

Quote:

---

Originally Posted by BoyBetterKnow

*** why when it can be done with css.

---

Agree. CSS is better ;)

So was what I said right or not? :S

CSS is better, but this person is quiet blatently a 'noob' at coding.

If you give me your MSN, I'll talk you through it and most likely help you with other stuff :}

Javascript and css do the same apart from you css is less code...

EDIT:

Heres a javascript version:

swap.js

Code:

---

function swap(el,which) {
  el.src=el.getAttribute(which || "origsrc");
}

function swapSetup() {
  var x = document.getElementsByTagName("img");
  for (var i=0;i<x.length;i++){
    var oversrc = x[i].getAttribute("oversrc");
    if (!oversrc) continue;

    x[i].oversrc_img = new Image();
    x[i].oversrc_img.src=oversrc;

    x[i].onmouseover = new Function("swap(this,'oversrc');");
    x[i].onmouseout = new Function("swap(this);");

    x[i].setAttribute("origsrc",x[i].src);
  }
}

var PreswapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreswapOnload(); swapSetup();}

---

Put this in the head of your page:

Code:

---

<script type="text/javascript" src="swap.js"></script>

---

And to make your images swap use this for your image code:

Code:

---

<img src="imgs/nav/homepage.png" width="59" height="50" border="0" oversrc="imgs/nav/homepage_over.png" />

---

Hope i helped :).

Lew.

Quote:

---

Originally Posted by Lewiie15

Javascript and css do the same apart from you css is less code...

EDIT:

Heres a javascript version:

swap.js

Code:

---

function swap(el,which) {
  el.src=el.getAttribute(which || "origsrc");
}

function swapSetup() {
  var x = document.getElementsByTagName("img");
  for (var i=0;i<x.length;i++){
    var oversrc = x[i].getAttribute("oversrc");
    if (!oversrc) continue;

    x[i].oversrc_img = new Image();
    x[i].oversrc_img.src=oversrc;

    x[i].onmouseover = new Function("swap(this,'oversrc');");
    x[i].onmouseout = new Function("swap(this);");

    x[i].setAttribute("origsrc",x[i].src);
  }
}

var PreswapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreswapOnload(); swapSetup();}

---

Put this in the head of your page:

Code:

---

<script type="text/javascript" src="swap.js"></script>

---

And to make your images swap use this for your image code:

Code:

---

<img src="imgs/nav/homepage.png" width="59" height="50" border="0" oversrc="imgs/nav/homepage_over.png" />

---

Hope i helped :).

Lew.

---

But what if javascript is disabled on a browser?

Quote:

---

Originally Posted by Serant

CSS is better, but this person is quiet blatently a 'noob' at coding.

If you give me your MSN, I'll talk you through it and most likely help you with other stuff :}

---

If he's a noob at coding then its best to teach him how to do it right rather than give him bad habits now.

yeah true, but its turned on by default and most ppl dnot turn it off or dont know how to... but yh css is better.

Quote:

---

Originally Posted by Serant

CSS is better, but this person is quiet blatently a 'noob' at coding.

If you give me your MSN, I'll talk you through it and most likely help you with other stuff :}

---

[email protected]

Quote:

---

Originally Posted by Jamesy

But what if javascript is disabled on a browser?



If he's a noob at coding then its best to teach him how to do it right rather than give him bad habits now.

---

Both ways are right, and it's not really a bad habit, HTML can be just as good as CSS :) Just if he is learning HTML, he should stick to it and not CSS, it can confuse people so easy.

Quote:

---

Originally Posted by .Zi

[email protected]

---

I don't think your allowed to post your email, hence why I said drop me a PM, but I've added you :P

Quote:

---

Originally Posted by Serant

Both ways are right, and it's not really a bad habit, HTML can be just as good as CSS :) Just if he is learning HTML, he should stick to it and not CSS, it can confuse people so easy.



I don't think your allowed to post your email, hence why I said drop me a PM, but I've added you :P

---

I always used to. Owell.