...

View Full Version : Rollover link highlights corresponding link...



bpbpbp
12-14-2009, 12:24 AM
Hi
I'm not sure if this is possible in css/html as I am a complete newb at both.
But here goes- (Sorry if my terminology isn't correct...)

I have a list of text links on the left navigation of the page and a bunch of corresponding image links on the right. When I roll over a text link on the left side, I want the corresponding image link to also go to it's roll over state, and vice versa, when an image link is rolled over it's corresponding text link should go to the rolled over state.

I hope that makes sense!? I can make an image to illustrate this better if needs be?

Any help would be much appreciated!

Excavator
12-14-2009, 02:03 AM
Hello bpbpbp,
Have a look at the rollovers on my homepage (http://nopeople.com/). I think that's pretty close to what your describing.
Look at the source to see how they're done.

Excavator
12-14-2009, 02:39 AM
Here is a single rollover example for you -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100.1% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#galleries {
width: 400px;
float: right;
margin: 55px 230px 0 0;
font-size: 1.4em;
text-align: left;
line-height: 59px;
}
#rollover1,
#rollover1 a:hover,
#rollover1 a {
width: 400px;
height: 59px;
display:block;
}
#rollover1 {
background: url(http://nopeople.com/files/roll-1.jpg) no-repeat right bottom;
margin: 0 0 10px 0;
}
#rollover1 a:hover {
background: url(http://nopeople.com/files/roll-1.jpg) no-repeat right top;
color: #CC0033;
}
#rollover1 a {
background-position: bottom;
color: #ffffff;
}
</style>
</head>
<body>
<div id="container">
<div id="galleries">
<div id="rollover1"><a href="#">Wallpapers</a></div>
<!--closes galleries--></div>
<!--end container--></div>
</body>
</html>

bpbpbp
12-14-2009, 11:55 AM
Thanks Excavator, that has the exact effect I'm after. However I'm unsure whether I could apply that code to this design layout?
I've attached an example of the sort way I'd like it to appear. I don't think I could have the text links and the thumbnails in the same container. So would I have to use a javascrip?
Or maybe I should re-think the design of my folio page if it's too tricky...
http://bpbpbpmail.fileave.com/project-list_temp.jpg

Excavator
12-14-2009, 05:03 PM
Good morning bpbpbp,
I think that could be done easily enough with span tags so you could stay away from js.
Do you have a test site with some code up yet? Link us to that.

bpbpbp
12-14-2009, 06:45 PM
Good afternoon Excavator!
I hope so, I tried to code fist some js before, to no avail.
Here's my current attempt at the projects page - http://bpbpbpmail.fileave.com/projects-page.zip
Cheers!

hdewantara
12-18-2009, 07:46 PM
Hi bpbpbp.
Personally CSS solution is always the first thing first.

But in your case,
CSS by itself can't bring your project_list's links and roll_over's images up simultaneously,
and javascript should be used.

How many links and images in that project.html, 18 links and 20 images?
Why differs, they should be the same aren't they?
And it means you have to install 40 mouseover and 40 mouseout events, it is possible though...hmm :eek::cool:

Hendra.

bpbpbp
12-18-2009, 09:45 PM
Hi Hendra,
The upload is just a rough work in progress so it's very scrappy, which is why the links and images don't add up.
It sounds complicated so I guess a redesign is in order. Thanks for the help

Bill

Excavator
12-18-2009, 10:04 PM
Hello again bpbpbp,
Hendra is right, a js solution may be better.
The best I could do with span tags is highlighting the text in the left menu column when a spot on the image map is hovered, but it wouldn't work the other way around.

Sorry for not getting back to you sooner.

hdewantara
12-19-2009, 07:58 AM
A little experiment with your project...

Change within __project__.html:

...
<script src="javascripts/__hover__.js" type="text/javascript"></script>
</head>
<body onload="javascript:init_simhover();" onunload="javascript:done_simhover();">
...

And __hover__.js contains below:

// RULE 1: EACH "PROJECT_LIST" LINKS MUST BE DECLARED IN SAME SEQUENCE AS "ROLL_OVERS" IMAGES.
// RULE 2: TOTAL OF PROJECT_LIST LINKS = NUMBER OF "ROLL_OVERS" IMAGES.
// RULE 3: X-BROWSERS INCOMPATIBLE VERSION.
// RULE 4: FULL OF ERRORS :)
// RULE 5: FEEL FREE TO USE/ MODIFY

var
arr_pl=null; // GLOBAL ARRAYS OF OBJECTS LIVE
arr_ro=null;

//RETURNS INDEX OF AN OBJECT A WITHIN ARRAY B ELSE -1
function indexof(a,b){
var
d=-1;
for (var e=0;e<b.length;e++){
if (a==b[e]){
d=e;
break;
}
}
return d;
}

// GLOBAL ONMOUSEOVER & ONMOUSEOUT ON PL LINKS
function onmouseover_pl(ev){
var
a=indexof(ev.target,arr_pl);
if (a!=-1) arr_ro[a].style.opacity=1;
}

function onmouseout_pl(ev){
var
a=indexof(ev.target,arr_pl);
if (a!=-1) arr_ro[a].style.opacity=0.5;
}

// GLOBAL ONMOUSEOVER & ONMOUSEOUT ON RO IMAGES
function onmouseover_ro(ev){
var
a=indexof(ev.target,arr_ro);
if (a!=-1) arr_pl[a].style.backgroundColor="cyan";
}

function onmouseout_ro(ev){
var
a=indexof(ev.target,arr_ro);
if (a!=-1) arr_pl[a].style.backgroundColor="white";
}


// GLOBAL INITIALIZE SIMULTANEOUS HOVERING
function init_simhover(){
var
a=null; // DUMMY POINTERS
b=null;

//ALLOCATE EMPTY ARRAYS.
arr_pl=new Array();
arr_ro=new Array();

// SAVE ALL PROJECT_LIST LINK OBJECTS TO ARR_PL.
a=document.getElementById("project_list").getElementsByTagName("a");
for (var c=0; c<a.length;c++){
arr_pl.push(a[c]);
}

// SAVE ALL ROLL_OVERS IMAGE OBJECTS TO ARR_RO.
a=document.getElementsByClassName('roll_overs');
for (var c=0; c<a.length; c++){
b=a[c].getElementsByTagName("img");
for (var d=0; d<b.length;d++){
arr_ro.push(b[d]);
}
}

//ADD LISTENERS TO ARR_PL OBJECTS.
for (var c=0; c<arr_pl.length; c++){
arr_pl[c].addEventListener("mouseover",onmouseover_pl,false);
arr_pl[c].addEventListener("mouseout", onmouseout_pl,false);
}

//ADD LISTENERS TO ARR_RO OBJECTS.
for (var c=0; c<arr_ro.length; c++){
arr_ro[c].addEventListener("mouseover",onmouseover_ro,false);
arr_ro[c].addEventListener("mouseout", onmouseout_ro,false);
}

}

// CLEANUP SIMULTANEOUS HOVERING
function done_simhover(){

//REMOVE LISTENERS FROM ARR_RO.
for (var c=0; c<arr_ro.length; c++){
arr_ro[c].removeEventListener("mouseover",onmouseover_ro,false);
arr_ro[c].removeEventListener("mouseout", onmouseout_ro,false);
}

//REMOVE LISTENERS FROM ARR_PL.
for (var c=0; c<arr_pl.length; c++){
arr_pl[c].removeEventListener("mouseover",onmouseover_pl,false);
arr_pl[c].removeEventListener("mouseout", onmouseout_pl,false);
}

delete arr_pl; arr_pl=null;
delete arr_ro; arr_ro=null;
}

bpbpbp
12-26-2009, 05:06 PM
hdewantara, that's ace!
I just applied your codes and I don't know how it works but that's exactly the thing I'm after. I'm going to have a tinker around and try to understand it. Millions of thanks, much appreciated!
I'll post when I've got something uploaded.

sophie6jones
12-28-2009, 09:15 AM
Using html and css is increasing your creativity. I like your post and i would like to know more about Rollover links.
Jenny Craig (http://www.goarticles.com/cgi-bin/showa.cgi?C=2395623)
Blockbuster (http://www.goarticles.com/cgi-bin/showa.cgi?C=2401144)
Blockbuster (http://www.squidoo.com/blockbustermovies1488)

hdewantara
12-28-2009, 09:40 AM
Hey bpbpbp, I'm glad it's working :thumbsup:

So it would just need some code optimization and
probably some error checking then. See
notes I made on beginning of __hover__.js file,
especially RULE 1 AND 3. :)Good luck!

Better late but...
Merry Xmas to all of you.

bpbpbp
12-28-2009, 12:58 PM
Ha ha yes, I like rule 4. But The only error I notice superficially is that after you have hovered over the img links, the corresponding text highlights will no longer appear. I'm hoping some kind of 'refresh javascript' command work to fix this?

shiny happy new year!

hdewantara
12-28-2009, 05:20 PM
Yes, somehow javascript stop responding,
after a failure on setting style to an undefined object.

Hope these additional red phrases could fix it ( __hover__.js ):


...
// GLOBAL ONMOUSEOVER & ONMOUSEOUT ON PL LINKS
function onmouseover_pl(ev){
var
a=indexof(ev.target,arr_pl);
if (a!=-1 && arr_ro[a]) arr_ro[a].style.opacity=1;
}

function onmouseout_pl(ev){
var
a=indexof(ev.target,arr_pl);
if (a!=-1 && arr_ro[a]) arr_ro[a].style.opacity=0.5;
}


// GLOBAL ONMOUSEOVER & ONMOUSEOUT ON RO IMAGES
function onmouseover_ro(ev){
var
a=indexof(ev.target,arr_ro);
if (a!=-1 && arr_pl[a]) arr_pl[a].style.backgroundColor="cyan";
}

function onmouseout_ro(ev){
var
a=indexof(ev.target,arr_ro);
if (a!=-1 && arr_pl[a]) arr_pl[a].style.backgroundColor="white";
}
...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum