need dynamic content on page using javascript

Question

I need this page: http://winteradagency.com/mrw/index.php so that when you mouseover the different small images (actually a set of them) the text below changes from text into an image (which is a larger image of the smaller one) I used to use Fireworks for that sort of thing but I'm thinking that there must be an easier way using a combination of a div tage and javascript.

Any ideas for something simple?

thanks!

Kevin Peno · Accepted Answer · 2009-12-22 21:50:53Z

1

http://fancybox.net/

lightbox, etc...

answered Dec 22, 2009 at 21:50

Kevin Peno

9,2261 gold badge36 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Drea Over a year ago

this is good but I need something that you don't need to click it just needs to be a mouseover effect with the image being seen well below the mouseover in the bottom div container

Kevin Peno Over a year ago

You don't need to click, with a little extra js you can tie it to a mouseover instead.

sparkey0 · Accepted Answer · 2009-12-22 22:13:46Z

1

The jQuery CYCLE plugin might suit your needs. It transforms a list of elements into a scrolling pane. You could simply disable automatic scrolling on initialization, and set the time between slides to 0. Then you can call the "slide number" in the callback for the mouseover event on the smaller thumbnails.

Cycle is here: http://malsup.com/jquery/cycle/

Your application is very similar to this example: link text

answered Dec 22, 2009 at 22:13

sparkey0

1,7091 gold badge12 silver badges15 bronze badges

1 Comment

Drea Over a year ago

yes, this is close but it needs to be simply a mouseover effect not an onclick event.

Community · Accepted Answer · 2017-05-23 11:48:36Z

0

This question has a similiar situation (replacing an input with an image) with an answer that might work for you. Note: it uses jQuery.

Edit: For your situation you could do something like this for each image:

$('img#id').hover(
  function() {
    ('div#id').hide().after('<img src="image.jpg" />');
  },
  function() {
    ('div#id').show();
  }
);

changing the 'img#id' to the id of the image and 'image.jpg' to the corresponding big image.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Dec 22, 2009 at 22:18

rosscj2533

9,3437 gold badges42 silver badges58 bronze badges

1 Comment

Drea Over a year ago

hmmm. I'm not able to connect the dots on that one. The image needs to be a mouseover not a click and display in the bottom div

Collectives™ on Stack Overflow

need dynamic content on page using javascript

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related