Disjointed Rollover bringing in HTML

**sandyk3** · 07-22-2008, 06:08 PM

Hi,
I have been looking for this and not finding it so I'm wondering if I cannot do it or have to modify what I would like to do. I would like a dijointed rollover, so when you rollover a picture, caption="Seed and Treats" I want text to appear to the right of the picture explaining what seed and treats the store carries. I would like it to not be an image so SEO can be utilized with <h2> and my text in the content area.

Any ideas to change this are welcome as well. I'm not sure if I can create that kind of rollover calling in HTML. I think I've seen it before, but now that I want to use it. I can't find it.

Thank you in advance for your help!!

Sandy K

**Jesdisciple** · 07-23-2008, 06:02 AM

I'm sorry I saw this so long after your post.

I'm not sure I understand what a disjointed rollover is; does the title attribute qualify?

Code:

<img src="some.jpg" title="[insert seed and treats]">

**jscheuer1** · 07-23-2008, 08:21 AM

I'm not clear on what you mean by 'disjointed'. But there is no reason why a rollover of an image cannot make text appear in another area. This could get a little involved if special effects are desired. And it seems to me that it could look odd (depending upon the design) having an area with no text, which I imagine would be required so that your text could then appear there.

Here is a very basic example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<table>
<tr>
<td><img src="http://home.comcast.net/~jscheuer1/side/point_1_o.jpg" 
onmouseover="document.getElementById('ptext').style.visibility = 'visible';" 
onmouseout="document.getElementById('ptext').style.visibility = 'hidden';" 
alt=""><br>Caption</td><td><div id="ptext" style="visibility:hidden;">
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
Hi There, this is the text that will appear onmouseover of the image. 
</div></td>
</tr>
</table>

</body>
</html>

It would be a good idea to have the text simply be visible to non-javascript enabled browsers. This could be done at least a couple of ways. But for now, I just want to see if this is what you are talking about.

**sandyk3** · 07-23-2008, 06:32 PM

Well.. I learned disjointed means rollover and somewhere else on the page something can appear. yes.. your code is what i mean.... does the text still count for SEO? I mean anything in the text that appears will SEO read it? Can I have some text appear on the page before someone rolls over it?
This is what I want.. I am doing a product page:

http://sandysdesignline.com/birdland/products.html

Instead of listing out all of the products I wanted to have a thumbnail to the right of the navigation in the content area and when they rolled over seed and treats image - thumb nail - a bigger image would appear with details about the seed and treats available at the store. I think I would like to have text appear before the user rolls over the thumbnails to maybe explain.. and I'm also having a problem on this page with my floats.. but that won't be an issue if i can do this.

So I guess my final question is.. is the text that is brought in on rollover visible for SEO?

Thank you so much for your responses.... I was beginning to think I couldn't do this.

Just noticed this is a table.. is that acceptable?
No CSS for this?
Sandy K

Okay.. i tried to copy your code below to see if I could have a second one and the picture appears but nothing on the rollover.. /??

**jscheuer1** · 07-23-2008, 07:50 PM

Mine was just a very basic example, it can be fairly easily adapted to multiple texts accompanied (or not) by images though.

The issue with SEO is opaque. I don't think that anyone knows for sure what search engines are looking at these days, and what they are skipping. And I think this is a matter that varies from search engine to search engine, as well as from time to time. But if you setup your page so that all the content (even dynamic content like this) will be visible to a non-javascript enabled browser, that's a pretty safe bet. Just doing that much will aid in SEO, but how it is done may be a factor in SEO, and certainly in how accessible your page will be to non-javascript enabled browsers.

For both of these objectives I favor having all of the content in ordinary visible divisions (or other elements) of a certain class. While the page is loaded, if javascript is enabled, it can write a style section to the head of the page making all dynamic content in the body that you don't wish to be immediately seen (that with this certain class) invisible before it is even parsed. You can then set up your events to reveal and/or hide the content desired at appropriate moments.

Tables are a matter of individual choice, many developers are excluding them in all cases. However, tables are meant to be used for tabular data. I think a product thumbnail being associated with a larger image and description qualifies as tabular data. It just depends (as far as which you elect to use - tables or floats) upon which is best suited to the process, content, and the design of the page for you.

Whether using tables or divisions, if the design isn't kept as simple as possible and/or isn't well thought out and applied, there will likely be a performance hit as far as the speed at which the page loads is concerned.

I'll have a look at your page and see if it helps clarify for me what you are after, and get back to you in a day or so, if not sooner.

If I don't get back to you before then, feel free to bump the thread, I often lose track of the various things going on around here, as there are always new ones popping up. Also, if you can be as precise as possible about what you want to have happen, that would help, any more details you can provide, please do.

In the meantime, have a look at this script, although not written with an eye to SEO, I think it comes close to what you are talking about. If we can agree on that (only agree if you really do), it can be a good jumping off point for this:

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

**sandyk3** · 07-24-2008, 04:41 AM

Thank you very much for your help with this, John. I really do appreciate the time you are taking for me. My hope someday is to know my stuff really well, as you do, and be able to pass on the knowledge to newbies. So just know you are not wasting your time - your help will one day be passed on from me.

If I did it correctly, I attached a file with t-n at the end.. this would be the image the user would rollover and then I attached an image of what I would like to appear to the right of the image. I would probably have about 8 images going down the side to the right of the navigation. This would be the ideal way for me to handle this page as it would get quite long if I displayed a picture with text for every category of products. I would also adapt this page to the nursery - showing current baby birds that are being hand fed with hatch dates and possible ready for sale dates and also to the boarding page where pictures would be of current guests with the birds saying a little bit.. like "Hi, my name is Jessie and I love staying at Birdland while my owner is hiking for the week".

I am so excited that you are helping and more excited that I can actually do this. I thought my idea wasn't doable after no one replied. this is great and I cannot wait to show this to the client.

Thank you thank you!
Sandy KAttachment 1938

Attachment 1939

edited to add a thought: you mentioned in your first post that it might look funny when the page first loads with nothing in the area where I will be loading in the text when an image is rolled over. i've only taken one class in javascript and 3/4 of the time the teacher wasn't there so doing things on my own became second nature so I'm not well versed in this area... BUT I was wondering if I could use an onload for some text in that area. I would like to have something... thank you!

**sandyk3** · 07-27-2008, 05:37 PM

Good Morning John,
I've been working on the page and I do think that I need all of the small images to the left to be next to each other so I have it all in one row of the table. I don't know if you can help solve some issues though. I would like the smaller images to float back up to the top of the page and I now realize that the rollover is reserving space for the first rollover and I'm not sure if I like that. They can't share the same space I gather. I'm going to show what I have to the client this morning. I would love to use this technique for the boarding and nursery pages as well. I hope we can do what I'd like but I think not. If we can't push the images up and the text can't share the same space, I may have to go with the other look. Thank you for all your help on this. I sure wish I knew javascript better than I do.

http://sandysdesignline.com/birdland/productsroll.html
http://sandysdesignline.com/birdland/products.html

Sandy K

**jscheuer1** · 07-28-2008, 09:58 AM

I see you are using two ptext areas, ptext and ptext1. These can be positioned via css (probably absolute positioning) so that when each becomes visible, it appears in the same spot. Also, you may (if you like, and I'd recommend it) have something in that spot when the page first appears. And there are some things to decide. I know that when you rollover a product, you want its ptext stuff to appear. But what would you like to happen when you roll off the product? It could be a return to whatever was there in the first place (the having something there when the page first loads idea), or it could be yet another bit of (default) content/information/instructions, or you could simply allow that product's details to remain until replaced by another's.

**sandyk3** · 07-28-2008, 07:35 PM

Hi John,
Yes I do want something to appear in the area before the user rollsover the image but I don't know how to do this. I'm working on putting this all to CSS... the images could be in one div going down the page and the content area to the right to accept the rollover. And I would want the page to keep the information until the user rolls over a new image. I was using ptext and ptext1 to test the results of having two images. How do I put something on the page before the rollover and how do I keep it there until the user rolls over another image? Yes, I also want how you said for everything to appear in one area. I am ashamed I don't know javascript that well to modify this myself. I'm going to keep trying to modify this myself. I was very happy that I was able to figure out how to at least get two on the page. LOL.

Thanks again for alllll your help!!

Sandy K

**jscheuer1** · 07-29-2008, 05:16 AM

Here is a fairly simple demo that incorporates all the concepts we've discussed. Images may be included wherever you like (for example, thumbnail images could go with the text in the thumbs section, and larger images could go in each detail section):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>SEO Detail Rollover Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#thumbs {
float:left;
border:1px solid #ccc;
}
#zero {
display:none;
}
</style>
<script type="text/javascript">
if(document.getElementById)
document.write('<style type="text/css">.detail {float:left;display:none;}#zero {display:block;}<\/style>');
function reveal(det){
if(!document.getElementById) return;
if (!document.getElementsByClassName){
document.getElementsByClassName = function(cn){
var ar = [], re = new RegExp('(^|\W)' + cn + '(\W|$)');
for (var d = document.all || document.getElementsByTagName('*'), i = d.length - 1; i > -1; --i)
if(re.test(d[i].className))
ar[ar.length] = d[i];
return ar;
};
document.getElementsByClassName.spoof = true;
}
for (var d = document.getElementsByClassName('detail'), i = d.length - 1; i > -1; --i)
d[i].style.display = 'none';
document.getElementById(det).style.display = 'block';
if (document.getElementsByClassName.spoof)
document.getElementsByClassName.spoof = document.getElementsByClassName = null;
}
</script>
</head>
<body>
<div id="thumbs">
<div onmouseover="reveal('first');">
1st Thumbnail
</div>
<div onmouseover="reveal('second');">
2nd Thumbnail
</div>
<div onmouseover="reveal('third');">
3rd Thumbnail
</div>
</div>
<div class="detail" id="zero">
This would be what people would see at page load.
</div>
<div class="detail" id="first">
This would be what people would see for the first thumbnail rollover.
</div>
<div class="detail" id="second">
This would be what people would see for the second thumbnail rollover.
</div>
<div class="detail" id="third">
This would be what people would see for the third thumbnail rollover.
</div>
</body>
</html>

Since everything is right on the page, and everything except the:

Code:

<div class="detail" id="zero">
This would be what people would see at page load.
</div>

would be seen (at once) by folks without javascript or without javascript that can handle the script, SE's will see all your important content and images. Any questions, just ask.