We help IT Professionals succeed at work.

Disjointed rollover that replaces the backgound image in another div.

John Carney
John Carney asked
on
510 Views
Last Modified: 2012-08-14
Please take a look at this webpage and modify the javascript and html, so that when the user rolls over the tabs in the "menu" id, the "header1B" background image changes: http://www.discretedata.com/Phase3/Homepage_CowJumperBrown.html

Right now it's looking for: getElementById("cowToggle"). I can't find anyhting with the id CowToggle; and in any event all I want to do upon rollover is swap out the default background image in "header1B" (http://www.discretedata.com/Phase3/images/headers/Header_BrownCowDown.jpg) with this image (http://www.discretedata.com/Phase3/images/headers/Header_BrownCowOver.jpg).

I never quite got it when I was asking this question 3 months ago, and now the project has come back.

Not that you can't find it yourself, but here's the CSS: http://www.discretedata.com/Phase3/styles/global_07.08.css

Thanks!

John
Comment
Watch Question

David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
Try these:

functionswapHeaderON()
{
  document.getElementById("header1B").style.backgroundImage="url(http://www.discretedata.com/images/headers/Header_BrownCowOver.jpg)";
}
functionswapHeaderOFF()
{
  document.getElementById("header1B").style.backgroundImage="url(http://www.discretedata.com/images/headers/Header_BrownCowDown.jpg)";
}

Open in new window

John CarneyReliability Business Tools Analyst II

Author

Commented:
Kravimir, your code didn't work for me. Could you please insert into my file (plus whatever else is needed), and upload it so I can see for myself?

ad5qa: I made local copies of everything: html, css, javascript and images, and it works fine. Curious thing, though: the file works the same way even if I delete the reference to the script from the html. (???)

Also, I can't see what in any of the code produced the text list of the colors. I can see that they are CSS-P Elements, but I'm not sure what a CSS-P Element is. And I can't see what changes the text from grey regular to red bold.

Finally, how do I get it to work with images?

Thanks,

John

Commented:
In the CSS file you will find the images as a background and in the anchor attribute
ul li a {
width: 100px;
height: 100px;
display: block;
}
ul li#yellow a {
background: url(images/yellow.gif) bottom center no-repeat;
}
ul li#yellow a:hover {
background-position: top center;
}
As you see the image is two and the wrapper is half the size of the image to clip off the other half. when hover it adjusts the image to the other half (the dim half)
John CarneyReliability Business Tools Analyst II

Author

Commented:
Oh, now I get it. The swap works both ways. I was fixed on how mousing over  the circles changed the text below and I couldn't quite connect the dots to see it in reverse. Let me fool around with that a little and see if I can make it work in my situation.
Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
John CarneyReliability Business Tools Analyst II

Author

Commented:
Kravimir, what's the absolute reference for the link in this line: <script src="../EmailBlasts/ee_q_23548837_files/AC_RunActiveContent.htm" type="text/javascript"></script>

... and in this: <link href="ee_q_23548837_files/global_07.css" rel="stylesheet" type="text/css" />

I replaced the css with my original, and even without the script source, it works in Firefox., but not in IE7. Is  that perhaps because I have no access to the script source?

Here's a link to my current html which works in Firefox. Please take a look at the html and css and let me know what else I need for it to work in IE:  http://www.discretedata.com/Phase3/Homepage_CowJumperBrown2B.html

Oh and don't forget the script source!

Oh, and by the way, thank you for getting me to this point.

John


John CarneyReliability Business Tools Analyst II

Author

Commented:
"... and in this" refers to the link to the css.
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
Oops. I forgot to change the paths back. Sorry. Just change them to what they are in the old version.
John CarneyReliability Business Tools Analyst II

Author

Commented:
Okay, thanks, but I still have that problem in IE So I took a little time to put in a new div with just the cow head. Then I created a simple disjointedrollover with an actual physical button tat swaps the two images.

I'm sorry this is taking so long, but if you could tell me how to make my existing css-driven menu buttons to do the same thing as the actual physical button below them, then I'll have what I need to demonstrate this to my boss, hopefully Monday morning.
http://www.discretedata.com/Phase3/RolloverTest%202.html

Thanks!

John
John CarneyReliability Business Tools Analyst II

Author

Commented:
Also, if there's a way to do this with less coding than I have ended up with doing it via Dreamweaver, all the better.  But the main thing is to get it working. I really appreciate all your help.

John
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

Commented:
AC_RunActiveContent.js seems to be missing (FF changed the file name because the error page was not an HTML page.) and is causing an error in IE (6 and 7). The image switching works though in Homepage_CowJumperBrown2B.html It really doesn't work for you? Odd.

I'd do this another way myself, but this is the simplest way.

I'm leaving on vacation in the morning, so I probably won't reply for several days.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.