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.