PDA

View Full Version : 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?
<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:


<!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/dynamicindex4/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 K1938

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):


<!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:


<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.

sandyk3
07-29-2008, 08:11 PM
Thank you so much. I will try this out at home tonight. Thanks for being here!!!

san

sandyk3
07-30-2008, 04:19 AM
Good Evening John,
This script is exactly what I need. I am trying to make two modifications. I've tried changing the thumbs div to only be 80px wide and I've tried a variety of other things but it's not working. The content area is slipping below the images and I'm thinking now since my other fixes didn't work, I need to have a separate div carved out of the content area or a div for them between the navigation and the content. I will be working on this tomorrow at work during my lunch time. I also need to have space between the pictures and a caption.

I don't want you to tell me the answer for this as I want to play with all that you have given me to see if I can get this. I will yell when ALL of my tricks have been played. Here is the page where I will be posting my trials and errors.

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

I can't tell you how thankful I am that you made up this code for me. Just by looking and studying your script I've learned more about javascript than I did in my course.

I will yell when I'm exhausted.. thank you!

Sandy K

jscheuer1
07-30-2008, 04:50 AM
Not to give too much away, but with your demo as it currently is, it would look better without (remove highlighted):


document.write('<style type="text/css">.detail {float:left;display:none;margin-left:130px;}#zero {display:block;}<\/style>');

Also, I've set the #zero to display none in the stylesheet and you've done that as well. Perhaps this should not be done with your particular setup, so that non-javascript users can see all the detail divisions including the intro (#zero) one, not just the ones associated with individual thumbnails.

With non-javascript users, all the info not set to display none will appear on the page at once. This won't be as 'cool' as the rollover effects, but at least they won't miss any content that you deem valuable. SE's will also see the page this way, but never care what the layout looks like, though they do like to see things well organized as far as structure (not visual) layout goes.

With javascript enabled (what most users have), the script writes additional styles to the head of the page setting up the rollovers' details to be revealed only when triggered.

sandyk3
07-31-2008, 04:04 AM
Hi John,
I did get rid of the float left also the zero in the css file for the non-javascript users. I also put .detail in the css file for non-javascript users. Now my left side runs straight down the page whether you have javascript or not. I cannot tell you how much I'm thankful for this and how much I've learned. I will be adding the appropriate pictures and text in the next couple of days. I plan to use this on the nursery and boarding page. Thank you again for all your help. You are one of the few that will reach out and not make the person learning feel bad for something they don't know. My plan is when I'm really good at all this... I will share my knowledge and help someone start web pages. PayitBack? I guess so. I can't wait to help someone.
I did this with my bird breeding business.. as soon as I was at a certain point, I helped two people start breeding birds. It's rewarding - helping. I'm sure you know that!
Hope to run into you again - I will keep you updated on the site!!
Sandy K
http://sandysdesignline.com/birdland/productsroll.html

sandyk3
07-31-2008, 06:39 PM
John,
I was also wondering this.. my thumbnails are small as to not weight down my page. If the user has javascript do the bigger images in the rollover text take time to load at the beginning of the load.. they will weight down my page if the user doesn't have javascript but will the if they do? Did I make sense?

Thank you!
Sandy K

jscheuer1
07-31-2008, 08:12 PM
According to the specification last I checked (I don't keep up on the specs like some do, as I realize that as long as the code is valid, each browser will do whatever it likes - none of them follow the specs 100%), an image with display none doesn't load until it becomes display block or inline. But as I say, individual browsers may treat this differently.

The best thing to do with images though is to keep them as small as possible, both visually, and more importantly, as far as their byte size goes. To do the latter, you need to optimize them. There are several free online image optimization tools. DD has one:

http://tools.dynamicdrive.com/imageoptimizer/

But for the highest compression with the best resolution, you will want to use a program that is designed to handle this. Now, I prefer Xat.com's image optimizer pro, but it isn't cheap (though moderately priced for what it does), so I would only recommend it if you plan on doing a lot of work involving images on the web.

The first step is to always crop and reduce the physical dimensions of the image as much as is feasible. Then use optimization to get the smallest byte size at the minimum acceptable resolution/quality.

If you are familiar with a good image processing program like The Gimp (free), PhotoShop, or Paint Shop, these can optimize most images better than an online tool, but not as well as a dedicated program like Xat's.

Whatever method you use, it is helpful to have a basic understanding of the different image formats that work on the web (.png, .gif, .jpg - .bmp works on the web, but is almost never the best for compression). Each of the first three have certain advantages and disadvantages depending upon the sort of image you are dealing with.

Even without experience you can use an online tool like DD's to achieve some byte savings. And doing so will start the process of learning about this aspect of web publishing, as it will give you some experience.

It is important to consider as well that no matter when the image loads, it will still load faster if optimized.

sandyk3
08-01-2008, 08:52 PM
Could I write javascript to load all images as the page loads?
Thanks again and again and again.

Sandy K

sandyk3
08-03-2008, 05:03 AM
Good Evening John,
I meet with the client tomorrow morning at 9:30am. I have the idea on the pages. I'm going back to PhotoShop right now to work on some images for the nursery page and the boarding page. I want to have different pictures up by tomorrow. I have two issues: The space between the thumb nails and the navigation.. I cannot find what is causing that and I would like it to be half the size. Still searching. The home page.. I was able to get the text of the content area to stay even all the way down but if you look on the roll pages... when the text is longer than my line of thumb nails - it spills over. I do think that I won't need to worry about it as I will have more pictures.. BUT I may not have that many on the nursery or boarding page. I'm going to work on pictures for the other pages right now so I can have different pictures on the nursery and boarding page. I'm confused on the spacial issue and the text issue.
Thanks for any clues.

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

jscheuer1
08-03-2008, 05:52 AM
On your stylesb.css file, changing thumbs to:


#thumbs {
float: left;
border: thin solid #000000;
padding: 5px;
margin: 2px 8px 100px -18px;
}

seems about right.

sandyk3
08-03-2008, 02:26 PM
John,
I tried everything even changing the margin on the thumbs and I guess I was making too many changes, not changing them back before another change and that all got in the way of my changes. Make sense? I do remember changing that darn left margin to a negative number. I switched back to my Mac side and used CSS Edit - I like this to see my changes real time. I swear I made these changes you did... I must have had something else changed and I couldn't see it.... makes me irritated. Thank you. I have my meeting in just two hours. I'm putting in some headlines and maybe changing up one more picture on the nursery and boarding pages. I will style some things up also. Thank you again for all your help.

May I ask, are you self taught and how many years have you been coding?

I sure wish my javascript teacher would have been there more. I didn't learn much as she was MIA.

Sandy K

jscheuer1
08-03-2008, 07:34 PM
I've been coding HTML and javascript since at least 2000, and had coded in other presentational markup languages for at least around 5 years before that, those used in many of the various bulletin boards (BBS's) popular around that time.

In general terms I am self taught but I owe a debt to several folks around these forums for educating me either by example or direct (sometimes even unsolicited) instruction.

sandyk3
08-04-2008, 03:13 PM
I changed the folder name this site is now:
www.sandysdesignline.com/feather526/index.html

I'm done with design, thanks to you for all your help. I need to tighten up the code and style and I'm waiting for content.

Thanks again!
SAndy K

sandyk3
08-09-2008, 04:07 PM
Good Morning John,
I've been able to tighten up most of my code and get things centered like the title but now I have another question for you. I ran the page through a page reader that I downloaded as I check every page I do and it does read my text that is inside the javascript so I am okay for people that use page readers. However, I am not okay if the person does not have a mouse. Using the tab key does not work. Is there a way to make the tab key go to the first rollover image after it hits the last navigation choice? I have been looking for this on the web since yesterday afternoon and I really think that I'm just not googling the right words. Thank you!


Sandy K

Added: John, Another person reviewing my site is sticking these articles down my throat telling me that SEO is not good on this site because google will not read my rollovers as links? I'm reading the articles and almost feeling like I need to change the rollover to clickable links? Now, I'm a bit confused.

http://www.google.com/support/webmasters/bin/answer.py?answer=42745&query=javascript&topic=&type=

http://www.google.com/support/webmasters/bin/answer.py?answer=81766&query=javascript&topic=&type=

http://www.google.com/support/webmasters/bin/answer.py?answer=66353

jscheuer1
08-09-2008, 06:07 PM
I don't believe any of that applies. Why not sign up and get crawled before deciding. There is nothing hidden, unless javascript is enabled. Even then, all can be seen when folks activate the rollovers. I think your friend was just looking at the page, not the code.

sandyk3
08-09-2008, 07:50 PM
Thanks John. That's what I was thinking too. This is the last post of my thread on About:
http://forums.about.com/n/pfx/forum.aspx?msg=9890.20&webtag=ab-webdesign

From other things I've read and researched this morning, and I've done a ton of research, I feel very comfortable with using this javascript. I did, however, create another file for the javescript just because I want the file clean and tidy.

I'm still trying to make the page tabable. I will find this too.. I'm determined...LOL..

Thank you again and again!
Sandy K

jscheuer1
08-10-2008, 07:43 AM
Right. If you want to follow w3c standards though, this:


<SCRIPT LANGUAGE="JavaScript" SRC="rollover.js">
</SCRIPT>

should be:


<script type="text/javascript" src="rollover.js"></script>

And I'd appreciate a credit, so it would be:


<script type="text/javascript" src="rollover.js">

/* Rollover Divisions Script Provided by jscheuer1
in http://www.dynamicdrive.com/forums/
This notice must remain for legal use
*/

</script>

sandyk3
08-10-2008, 08:34 PM
Thank you for the correction and I will put the notice in the pages.

I haven't been able to find a way to make these images tabable, if that is a word. The owner started talking to the other girl that could have done his site and is pushing him to make the page accessible by way of the tab key. I may have to make this clickable. I will really hate it because of all of the work you and I have put into this. I'm trying to stress to the owner that there are not that many users out there that only use the tab key but this other girl if filling his head. After I get done with this page, I'm getting paid and walking away. I will be suggesting that this other girl take over for the updates. To tell you the truth, it's not worth all of this to keep doing his updates. I have had one fight after another. And the down side of this... I also breed birds and sell to Mark, the owner, and now that relationship may be hurt. I have a contract but that will only help me get my final pay. I have other stores in the area I can sell to and buy their products but I have learned one very important thing.. I don't think I will do a site for a close business associate again. This may have hurt the relationship I previously had with my breeding business. Can you tell I'm upset over this?

I will keep your code on my computer and I will probably use it down the road as I love this type of rollover. And I will keep your credit in it for sure. I just thank you so much for helping me realize my dream of this rollover.

Sandy K

jscheuer1
08-11-2008, 03:38 AM
Tabbing isn't that big of a deal:


<!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){
cn = cn.replace(/ +/g, ' ').split(' ');
var ar = [], testname = function(n){
for (var re, i = cn.length - 1; i > -1; --i){
re = new RegExp('(^|\W)' + cn[i] + '(\W|$)');
if(!re.test(n)) return false;
}
return true;
}
for(var d = document.all || document.getElementsByTagName('*'), i = 0; i < d.length; ++i)
if(testname(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');">
<a href="javascript:rollover;" onclick="return false;" onfocus="this.parentNode.onmouseover();">1st Thumbnail</a>
</div>
<div onmouseover="reveal('second');">
<a href="javascript:rollover;" onclick="return false;" onfocus="this.parentNode.onmouseover();">2nd Thumbnail</a>
</div>
<div onmouseover="reveal('third');">
<a href="javascript:rollover;" onclick="return false;" onfocus="this.parentNode.onmouseover();">3rd Thumbnail</a>
</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>

sandyk3
08-11-2008, 08:01 PM
Okay.. hold on.. do you mean it's as simple as changing that to an onclick event? I have been searching .. can I ask you this? If I wanted to find this solution in Google.. or dynamicdrive.. just how would i search for it because I have tried my heart out searching for this answer. I'm embarrassed I couldn't find it, John!!!! I should have been able to find this!!!

Thank you!
Sandy K

jscheuer1
08-12-2008, 12:34 AM
Doing it is easy. Knowing how is a little complicated. The main thing is that you cannot tab to things other than anchor links, certain inputs, and textareas. For our purposes, I chose anchor link. But I didn't want the link to fire, so I chose to set it's href to meaningless javascript and it's onclick event to return false. That way it won't do anything regardless of whether javascript is enabled or not. However, it's still an anchor link, able to receive focus via tabbing. It is it's onfocus event attribute that does the work, making the page's content viewable when javascript is enabled without need of a mouse, tabbing will do. Now, when javascript isn't available (disabled, whatever), all of the content is viewable anyway, so there is no need to tab to see it. With or without javascript, tabs will still operate normally for mouseless navigation.

sandyk3
08-12-2008, 02:12 AM
You really know how to explain things well. have you considered teaching at one of the online places. i took my javascript class at www.lvsonline.com and even if the teacher was there, we learned more of date scripts, scripts that work off of user input - stuff like that. I wish we would have learned more of the scripts like this. Thank you very much for all your help! I really couldn't have done this without you. Can you answer one ?, though? There has got to be a better way for me to search this information out on the web? Most of the time when I google anything to try to help me it returned more of the javascript for forms rather than what I needed. What is the secret?
Sandy K

Having a bit of trouble at first. The detail sunk way down on the page and is showing as a link with underlines. In your code, I assume the img src comes after the line you added?

Nevermind, I think I'm getting it.
Thanks!

hour later - done!! http://sandysdesignline.com/feather526/products.html
Thanks again~~~

jscheuer1
08-12-2008, 01:32 PM
I think you want to get rid of all these br tags:


iaculis turpis. Aliquam egestas risus ac arcu. Maecenas ac lorem. Etiam hendrerit.</p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<div style="clear: both;"></div></div>
</div> <!-- end content -->
<div id="bottom

as they are pushing your footer down when Bird Stands is featured/selected.

You may want to add this style:


.thumbs a img {
border:none;
cursor:default;
}

It will remove the border from the images (visible in the first place only in some browsers) used for rollover, and make the cursor an arrow instead of a pointer - good so that users will be less likely to click on the rollovers, which won't hurt anything if the do, but since it won't do what they expect, best not to encourage it.

I'm not sure what you mean about Google, although for tabbed navigation in particular, yes it is most commonly used in forms where the user is likely already at the keyboard filling in information.

When using Google though, if there is something you are getting a lot of that you don't want, you can often use a negative (minus) keyword to get rid of it.

Say you want to search:

tabbing through document javascript

and it seems like all you are getting is stuff on forms and you don't want that, try:

tabbing through document javascript -form

That should return only results without the word form in them.

sandyk3
08-13-2008, 03:26 AM
Thanks for that tip. As long as I've been searching I did not know that. I knew of the "+" and I should have assumed I could do the "-".
All of the pages are done and your credit is in the file. Now I wait for the content and hopefully I can save our business relationship and still do some bird business with him.
Thank you for all you did and all you taught me.
Sandy K

micheleK
08-22-2012, 05:26 PM
Hello John,

I was searching DD for information about disjointed rollovers and found this thread. It's promising, but I'm finding that its not quite exactly the solution for the site I'm working on...
http://tryonfarm.com/index_tabNav.html
http://tryonfarm.com/ (page without tabbed navigation)

As you might recognize, the icon navigation items aren't clear, so we've added tabbed navigation below. My client would like, upon rolling over the tabbed navigation, to have the icon navigation over state be highlighted. These icons need to remain linkable, though, in case someone clicks on those instead of the tabbed navigation. The reverse effect, rolling over the icon highlighting the relevant tabbed navigation, would be great (but probably not required).

I use DD's code for my sites all the time and find them super helpful, so if you know of some existing demos I can customize, that'd be great - I wasn't lucky enough to find it on my own. Any other recommendations are extremely appreciated as well.

Thanks a bunch,
micheleK

jscheuer1
08-22-2012, 07:04 PM
Put this script in the head of the page:


<script type="text/javascript">
jQuery(function($){
var re = /.*\/([a-z]+\/)$/;
$('.rollover_nav').each(function(){
var t = this, href = t.getAttribute('href'), ref = (ref = re.exec(href))? ref[1] : href;
$(this).data('partner', $('a[href="' + ref + '"]').eq(1).hover(function(){
t.style.backgroundPosition = '-60px 0';
}, function(){
t.style.backgroundPosition = '';
try{t.removeAttribute('style');}catch(e){}
})).hover(function(){
$(this).data('partner').css({color: '#C04243', backgroundPosition: '0 -25px'});
}, function(){
$(this).data('partner').css({color: '', backgroundPosition: ''});
try{$(this).data('partner').get(0).removeAttribute('style');}catch(e){}
});
});
});
</script>

Put it after:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>


I came up with this alternate method that's a little cleaner (it would take more changes to the markup to break it, and it's as cross browser as the other method without needing extra stuff to make it so), and I think a little easier to see what's happening.

Do not do both of these. Either do the above, or do this -

Add these styles at the end of your last stylesheet:


#icon_nav a.rollover_nav_over {background-position: -60px 0;}
#nav_tabbed li a.partner_over {color: #c04243; background-position: 0 -25px;}

Use this script instead of the one above, place it in the same spot though:


<script type="text/javascript">
jQuery(function($){
var basehref = $('base[href]'), sz = basehref.size();
basehref = (sz? basehref.eq(sz - 1).attr('href') : location.href).replace(/[^\/]+$/, '');
$('.rollover_nav').each(function(){
var $t = $(this), href = this.href, ref = href.replace(basehref, '');
$t.data('partner', $('#nav_tabbed a[href="' + ref + '"]').add('#nav_tabbed a[href="' + href + '"]').hover(function(){
$t.addClass('rollover_nav_over');
}, function(){
$t.removeClass('rollover_nav_over');
})).hover(function(){
$t.data('partner').addClass('partner_over');
}, function(){
$t.data('partner').removeClass('partner_over');
});
});
});
</script>

micheleK
08-23-2012, 02:25 PM
WOW! You are amazing!!!!!

It works perfectly: http://tryonfarm.com/index_tabNav.html

I hope you win the lottery today!
Thanks so much, John.
Michele