Page 1 of 1

Some weird link problem

Posted: Tue Mar 04, 2014 9:45 am
by Ariana
The links under the pipes in the header extend: even when your mouse isn't over the image you can still left-click on it and follow the link. I think the old way (used on the original supermariobrothers . org) with the <img> tag was good enough but well why put a background image on a pragraph tag lol? Never thought about it.

Re: Some weird link problem

Posted: Tue Mar 04, 2014 1:07 pm
by Shadow Yoshi
The links are pretty wide, yeah. I might change that.

I can't just use an image tag though because there has to be an change upon hovering.

Re: Some weird link problem

Posted: Tue Mar 04, 2014 2:15 pm
by Ariana
How about this? I have 2 solutions (but that means to edit all the code in your td.pipelabel tags.) :
(Recommended)

Code: Select all

<a href="../" alt="SMBX Home"><img alt="SMBX Home" id="smbx-home" onmouseout="this.src='../smbx-home-1.gif';" onmouseover="this.src='../smbx-home-2.gif';" src="../smbx-home-1.gif"></a>
And maybe something like this in CSS:

Code: Select all

div#smbx-home {
width: 62px;
height: 30px;
border: 0px;
}

Or you can use a CSS-only solution if you don't want JavaScript events in your HTML tags:

Code: Select all

<a href="../" alt="SMBX Home" id="pipe-link"><div id="smbx-home"></div></a>
And maybe something like this in CSS:

Code: Select all

div#smbx-home {
width: 62px;
height: 30px;
border: 0px;
background-image: url('../smbx-home-1.gif');
}

div#smbx-home:hover {
background-image: url('../smbx-home-2.gif');
}

a#pipe-link {
display: block;
width: 62px;
}
Of course this is an example for the SMBX HOME link but with both solutions you'll need to use 2 images: "smbx-home-1.gif" and "smbx-home-2.gif". Your choise.

Re: Some weird link problem

Posted: Tue Mar 04, 2014 3:54 pm
by Shadow Yoshi
I can code it myself, but thanks.

And the second solution you provided is the same thing I have but with a div instead of a p (which doesn't solve the validation problem of having those elements within an a).

I'll end up keeping the system I have currently (I don't need to use two images), except I'll remove the p's and set their a's to block display, as I had to do so with the Download Now! link on the home page.

EDIT: Wait a minute, I'm not even having this problem in the first place. Must be something to do with different browsers. I was going to change the links anyway and remove the unnecessary parts after having to do so with the download link.