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.

[LMS16]

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.

[.Zi]

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]

[DJ-Ains.T]

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.


[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

[.Zi]

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.