Rollovers with hypertext

[Jeager]

I redid a website, anpsystems.com, where the old web designer was using tables and all javascript rollovers, so I redid the entire site, but because of some forms and cart buttons, I had to reuse some older script, and kept the rollovers for the product page and each of the product pages the same.

Its a simple hotspot image switch, but he wants the text to not be blurry, so he wants to know if I can switch it to all hypertext. Now, is there a easy way to do this? I was thinking of doing show/hide divs on rollover and having that formatted to look like the image. But I feel like thats going to be a ton of avoidable work. Maybe there is a better way to export the images so the text is not blurry? Any suggestions?

[furrball1383]

umm it might be easier to have the image in the background and just make it so the text in the link has the same font size and styles etc as the one used on the image, then position it over the text in the graphic?

[Jeager]

Yeah, thats how I would do it for the normal image that shows. However, all the facts have rollovers that state the ingredients and whatnot, so I would have to have some sort of rollover effect that shows another image, or div, or replaces the current one. However to replace the current one would mean going pure image and not hypertext. If you go to the website you will see what I mean, so that is where I came up with the show/hide idea.

The main problem we ran into before was that on normal rollovers that I had planned, his old version of IE didn’t work right, so we had to revert back to this. But that was all done a few months ago and I’ve learned a lot, but still not sure how to go about this, hence my question being here.

[furrball1383]

hmm I wish you would post a link to the website, but basically any other rollover image would still have the same text in it. if its a different color on hover or click, just assign that color to the text in the css for those states, i don’t see therefore why you couldn’t use the same method for all 3 states.

[Jeager]

New text on each one, and the site is anpsystems.com, I had posted it in my first comment. Guess I wasn’t clear enough about the hypertext issue, on the rollovers the text would need replaced with different text. Basically you rollover the product image, and the supplement facts would pop up.

[furrball1383]

ok after taking a look at the page the information on the images is way too tiny to read, its no wonder it seems blurry. Although it seems like a ton of work to you, it would be best to recreate the information using hypertext, it shouldn’t be as much of a problem. you basically need to figure out the font settings for all the different font sizes in there, then create the css to attach these settings to the information. its probably going to take an h1, and h2, 2 p tags with different id’s and a span tag for the black dividers. The div would also have its own id for the css to make it white with a single line black border. It wouldn’t take you too long to do really after you get the first one done it should be smooth sailing as the heading should stay the same as far as i can see from the existing images. It might even be better this way incase they want to change the information later. If I’ve misread anything about what you want to do, do reply back!

[Jeager]

I was under the same assumption, after the first one, would get much easier. However, im not sure how im going to make the rollovers work like that. Maybe I could do a distant rollover? And have the hover use a visibility:hide to normal? And just have that div positioned absolutely beside the normal anchor?

[furrball1383]

well all you’d have to do is have the z-index of the div set to a lower number than that of the actual page wrap and basically make the z-index change on hover so that they now pop to the front. changing the opacity should work as well but i don’t know if the divs will play nice with each other that way which is why i’m suggesting the z-index. Absolute positioning i’m not sure about, if you expect the target audience to always view the website in the full browser window then that would work, however i’m not sure how it would affect someone working in a resized window so you shall have to check it out

[Jeager]

Well, for it to properly set on top of the other elements, it would have to be set outside the normal flow of the website. And it would be in a relative container to make sure everyone who uses the site will see it properly. I’ll have to play with it some today. I was trying the z-index, but I was trying to make something happen that obviously wouldnt fall in css grounds. I’ll have to back up a few steps and see where I can go with it. I’ll post results later.

[Jeager]

Took a lot more time then it should of, but I came up with a way using only css. Since you cant target a div in css thats not with the anchor, I used a overflow trick of hiding the actual text and only showing the right side of the div. I couldnt get the zindex working correctly mainly due to the div would be coming over the other links, so after you rollover it, you are stuck without mousing completely out.

[Author]

Posts