- This topic is empty.
September 3, 2014 at 4:54 am #181496AnonymousInactive
I’m wanting to link to another page and have the “button” change colour. Which is best for download time, plain css using li.hover to change the appearance or onmouse_over with two small images (~134px by 21px)?
Thanks in advance.September 3, 2014 at 5:04 am #181502
I’m against having JS in HTML to perform something that CSS or linked JS can do.
Performance would be the same in practical terms…but if JS isn’t enabled (not a common thing these days) wouldn’t you lose the effect?September 3, 2014 at 5:50 am #181514AnonymousInactive
Trying to reply here. No dice. No funky scripting this time either.September 3, 2014 at 7:28 am #181526AnonymousInactiveSeptember 3, 2014 at 7:38 am #181529
Sometimes the links set -off a flag for some unknown reason….or it could just be you.
:)September 3, 2014 at 7:53 am #181540AnonymousInactive
….or it could just be you.
LOL. My money is on that!
If it weren’t for bad luck, I’d have no luck at all. Gloom, despair and agony on me.September 3, 2014 at 10:39 am #181552
It’s not entirely clear to me what you are trying to do but you mention a clickable link.
Now, first question…is a link to somewhere or a clickable (whatever) that does something?
You might want to take quick look at this thread – https://css-tricks.com/forums/topic/div-as-a-button/#post-181475
Now, in either case, the image itself is not ‘content’…it’s only there for styling purposes..at least as I understand what you are trying to so.
To my mind, if it’s styling, it’s CSS (say it with me!) and we can manage that through background-image and swap it out on
:hover..if more fancy effects are required we can find options that work.September 4, 2014 at 3:52 am #181599
So, basically…it’s just a link to another page which would need text (for screenreaders) [but that can be hidden] and a couple of images as backgrounds that get swapped out on hover (or mouse_over).
We don’t really need JS for that.
How big is the link [and thus the bg image(s) ] going to be?September 4, 2014 at 4:45 am #181610AnonymousInactive
Can’t post here again!September 4, 2014 at 4:50 am #181608AnonymousInactive
Yes, just basically a link to another page. If something like this
<a href="TARGET URL GOES HERE"><img src="URL of image1" onmouseover="this.src='URL of image2'" onmouseout="this.src='URL of image1'" /></a>
is best, then two images of 135px wide by 20px high would be used. The other example I gave used no JS, just CSS and an li class.
Which route is better?
Many Thanks!September 4, 2014 at 5:02 am #181617
It’s something about anything that even looks JS function-like in code or text that’s flagging it up.
Firstly, as I said, not having text in a link is a big accessibility no-no so you should have something but it can be easily hidden and there are multiple techniques.
The images are there for styling only so they should be in the CSS as a background images on each state (hovered or unhovered).
Which is best for download time
No difference…the images would (I think) be downloaded anyway (or if not, only when called) whether by CSS or JS.
If the images would be used multiple times (perhaps for multiple links) then maintainability would be on the side of CSS as you would only have to change the CSS once if you decided to change the image..whereas you would have to change it in the HTML on every page manually in the JS solution (unless the pages are created by server side code).
I see no real need to use JS to do something that CSS can do…and if JS is required it should be abstracted out into a separate JS file and not handled inline (IMO).September 4, 2014 at 5:11 am #181619AnonymousInactive
not having text in a link is a big accessibility no-no
The li class is basically the same as is used in a nav bar. In fact, I pared down the nav bar I’m hoping to use on the site I am working on. There is text in those only as what is placed in the
<a href="">exaple</a>tags, and the same would be used if I went the li class route for the subject at hand. Isn’t the text in the
<ahref="">meet the criteria you mention?
Thanks!September 4, 2014 at 5:21 am #181623
Isn’t the text in the
<a href="">meet the criteria you mention?
Nope…screen readers (as far as I know) won’t read that…they’ll just skip over it.
You may be able to get away with link text by using the ‘title’ attribute though.
Of course you may not wish to worry about this issue.September 4, 2014 at 5:33 am #181628AnonymousInactive
Tried to post here again 3x. Anyway, I’m going with using the images and non-css.
Thanks Paulie!September 4, 2014 at 6:28 am #181624AnonymousInactive
I think I’ll go with the
on_mouseover="this.src=approach. Less code and more straightforward. It just seems like “old school” after trying to learn CSS.
Thanks so much Paulie!
- The forum ‘Other’ is closed to new topics and replies.