I'm using an .anythingSlider (http://css-tricks.com/examples/AnythingSlider/) and I need to make it unique... I've modified it so that I can use my websites own navigational links to scroll it around, but I want to trigger an image change for the navigational link that the pane is on at that moment.

I'm not too sure where to start... ideas?

2 answers

0
points

Having trouble getting the clicked/slid-to image to change.

getElementbyId('image1')

Where do I set up my #image1 such that it can grab from it? I have:

$("#homenav").click(function(){ $('.anythingSlider').anythingSlider(1); document.getElementById('hoverimage').src='images/hoverimage.png'; });

I need to make it so 'hoverimage' is loaded in place of the current navigational image when clicked on.... I appreciate the help, you've been a huge aid.

Answered over 6 years ago by KyleBooth
  • Let's get a link to your page so I can see what you've got so far. Gary Hepting over 6 years ago
  • http://www.nascentdigital.com/staging/draft.html KyleBooth over 6 years ago
  • I understand there's some positioning issues under small-resolutions... I'll try to solve that later. I'd like the navigation buttons (top and bottom) essentially to be 'lit-up' when the pane goes to that particular one. This website is a learning experience for me.. I appreciate the help. KyleBooth over 6 years ago
  • You're going to want to make this image into 3 pieces aren't you? Otherwise it will be harder to set the highlighted one... http://www.nascentdigital.com/staging/images/navigationstructure.png Gary Hepting over 6 years ago
  • Yes, now that i'm implementing an image-change effect I will break the nav into 3 pieces. KyleBooth over 6 years ago
  • Okay, so instead of applying that image as the background to the whole section, apply the individual images to each anchor and then set an id="image1", etc. for each of those. Gary Hepting over 6 years ago
0
points
<a href="#"><img id="image1" src="image1.jpg" alt="This is image 1 - a.k.a. Home" /></a>
<a href="#"><img id="image1" src="image2.jpg" alt="This is image 2 - a.k.a. The Team" /></a>
<a href="#"><img id="image1" src="image3.jpg" alt="This is image 3 - a.k.a. Contacts" /></a>

and then set the javascript DOM selector to the appropriate element IDs for each of those:

document.GetElementById('image1').src='image1_active.jpg';

document.GetElementById('image2').src='image2_active.jpg';

document.GetElementById('image3').src='image3_active.jpg';
Answered over 6 years ago by Gary Hepting
  • ahhh it's making sense now. Let me give it a shot and let you know how it goes :) KyleBooth over 6 years ago
  • NOTE: you're also going to want each function to RESET the other two to the normal image. :) Gary Hepting over 6 years ago
  • Let me know if you get stuck, you're really close. :) Gary Hepting over 6 years ago
  • How does the reset work? I'm not familiar with the java... I managed to get the image swap working though :) I'd like to implement it with a hover as well though, I can do that with a mouse-over triggered function though can't I? KyleBooth over 6 years ago
  • Also, this function doesn't encompass the slide-show action that occurs if you don't click any links... I'd like the different images to move around with the slide-show action as well, not just with a click event KyleBooth over 6 years ago
  • I managed to get the reset working... but I did it in a very brute-force manner. If you view my draft.html script section you'll see what I mean. There has to be a more efficient way of doing it.. KyleBooth over 6 years ago