I have a left side fixed menu made of images that link to sepcific image on a specific section of the page, and I would like to have the image that is being viewd to be highlighted (either background, border, or opacity, doesn’t matter).
Is it possible with css only?
How would I do it?
Stole images off from @PaulOB ; hope you don’t mind. Also modified a demo he had which used hover, and changed some HTML/CSS around to make it clickable.
Thank you very much.
Really amazing to an illiterate in css like me.
However I am not being able to make it work in my page, if you go over the code I’ll really appreciate it.
I tried playing with it, but no matter what I did I couldn’t get it to work.
If I put your code as it is in the left column it works just fine, but if I move the "img-hold£ to the right, it just breaks, that like other combinations, and play with the code you kindly supplied.
Like said above my illiteracy wins.
Following you can see the actual code of my page, I stripped it of the markup and css that I think isn’t necessary to keep it short, so no worry about it looking awkward.
I’d like the ul (class=“links-sx”) to be on the left column (class=“left”), and the images on the right column (class=“right”)
I don’t mind the solution to have all images swapping in one single box, which is more elegant than my “inline” solution.
Would you happen to have this on a live website? I only have access to a chromebook for the weekend so making local copies for testing is out of the picture for a couple days.
I uploaded here the files, I also zipped all the files for your convenience.
holytablets dot org/gallery_test
holytablets dot org/gallery_test/gallery_test.zip
You don’t have any id=“img-1/2/3” in your code for the anchors to target your selection. The anchors have the href at “img-1” /2 /3 etc. There is no id matching these hrefs.
I had tried them, and had removed them for you to see my actual markup, indeed in the live example there is no span either.
I just readded them, but still no joy, most probably I am adding them in the wrong place, and/or order.
In your code you have the the image “box” (class=“img-hold”), and then you have the ul, and it works as you planned, but in my markup where I have ul in the fixed left column, and put the images on the scrolling right column it breaks, and I am sure it’s because I am doing it wrong.
I have tried different combinations, but still no success.
I had tried your suggestion, among other combinations, and it doesn’t work, you can check it at the link, as I updated the file as per your suggestions; as you can see it works, but it displays the images on the left fixed column, not on the scrolling side (page), as intended.
Thank you for pointing out the error, about two class attributes.
But I can’t get it, for sure it’s me who is missing something.
If you’d like to take a look at that test it’s here (with the double class corrected)
holytablets dot org/gallery_test_2/
With all the combinations I tried, no wonder I forgot something.
However, I did remove the span with the IDs, and it does take me to the intended image, but the link on the left is not highlighted, which is what I am trying to achieve.
You said you wanted the image highlighted not the link. You would need js to highlight the link itself.
Something like this:
$(document).ready(function() {
// add class to link when clicked
$('body').on('click','.ab-links-sx li a', function(event){
$('.navon').removeClass('navon');
$(this).addClass('navon');
});
});
Then in the CSS:
.ab-links-sx li a.navon{outline:1px solid red}
When I first tested the page (locally after adding my original fixes) selecting the link on the left sent you to the image with a nice scroll effect but you seem to have removed that now.
Also not quite sure what you are doing with the tiny image next to the links on the left.
I apologize, I just reread it, and you are absolutely right, although Ryan intended it the way I needed, in my defense I should say English is not my first language, and I di state it in a confusing way, what I meant was:
and I would like to have the link image, of the image menu, that is being viewd to be highlighted
Sorry again.
You are right, the scrolling was smooth, and seems gone with the changes made trying to follow this thread - NOT saying because of your suggestions, I am sure I messed something, or there is some incompatibility; I’ll try to start over from the original state, and go step by step to find out (hopefully) the culprit.
Also not quite sure what you are doing with the tiny image next to the links on the left.
I am trying to have images instead of text for the links, basically thumbnails to be clicked to go to the larger image down the page.
Ok, great, with Paul’s js now the links are highlighted, and I just need to tweak them to display nicely.
For someone looking for similar solution:
I first put it in the <head>, then before, and after the <ul>, and it worked when I put it at the end just before <body>.
There is one small issue for which I will need your help, maybe I’ll open a new thread, and hope you guys will be there.
The issue is that when moving away from the last clicked image the highlight stays on, I mean you click on the image, and then decide to go to another section of the page although you are not viewing the image the link image is still highlighted.
