Coding a Layout - Help!

[.Zi]

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

[BoyBetterKnow]

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

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

[.Zi]

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);
}


?

[Mickword]

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

[BoyBetterKnow]

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

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

[Jahova]

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

Agree. CSS is better

[.Zi]

So was what I said right or not? :S

[DJ-Ains.T]

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 :}

[LMS16]

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

EDIT:

Heres a javascript version:

swap.js

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:

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

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

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

Hope i helped .

Lew.

[Jamesy]

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

EDIT:

Heres a javascript version:

swap.js

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:

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

And to make your images swap use this for your image 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?

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.