what solution for "dynamic roll-over" ...

  • floriauck
  • Newbie
  • Newbie
  • floriauck
  • Posts: 10

Post 3+ Months Ago

hello, ..

I am about to create the html from a photoshop file and i have a specific questions about one part ...

First off, let me show u the screenshot (only a jpg picture, but that what the home-page will look like) http://www.brasslesachtal.com

on the left hand side where it says "Biographien" I have 8 little thumbnail like headshots of the musicians.

I would like to create some, I guess you would call it, dynamic roll-over.

What I want is, when I move the mouse over the thumbnail pictures, i want the persons name to show up below the table that contains all 8 thumbnails in the littler table with the instruments in the background. (and of course when I click on the picture it will link to the persons biography - but that I am sure isnt the problem)

I know that it can be done in fireworks, but I wanted to get some input. Maybe i can create this effect easily in Dreamweaver withough importing fireworks html etc..(can it be controlled by css?) Or maybe there is a plugin, a software, java-script, etc etc .. How would you solve this problem?

Thanks for any input to that..

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • User avatar
  • Posts: 3423
  • Loc: Richland, WA

Post 3+ Months Ago

you could use javascript


Code: [ Select ]
<form action="#">
//put this at the top of the tale
  <input type=text name=names value='Mouse over an image to see names'>    
//but this for the images
<a href="#" OnMouseOver="elements[0].value += 'Name';"><img scr='image.gif'></a>

  1. <form action="#">
  2. //put this at the top of the tale
  3.   <input type=text name=names value='Mouse over an image to see names'>    
  4. //but this for the images
  5. <a href="#" OnMouseOver="elements[0].value += 'Name';"><img scr='image.gif'></a>
  7.         </form>

im sure you could be able to do this with out the input field but i dont know how so.

if you want to see this in action you can look here
its not quite the same thing but it works how you want it i think

//edit: i think its OnMouseOver or its just MouseOver any one know the right command?
  • darkthroniar
  • Beginner
  • Beginner
  • User avatar
  • Posts: 42
  • Loc: Los Angeles, CA

Post 3+ Months Ago

hi floriauck

hope i understand. if you know some of HTML and JavaScript is really easy do that kind of things only think that all your images in the webpage are objects and that objects have properties. Ok.. let's do it

in HTML every thumbnail is an image object like this

Code: [ Select ]
<img src="thumbnail_text.jpg" name="mytext" border=0>

Look that the tag img has a name that's is really usefull for our purpose, with the name you are declaring the IMG tag as an object and your browser can find it easy.

then you have to change that pic in a link with OnMouseOver and OnMouseOut like this.

as you know liks are declared like this.

Code: [ Select ]
<a href="#"> some text<a/>

make an image as a link, and in the link put this code.

Code: [ Select ]
<a haref="# OnMouseOver="mytext.src='thumbnail_text_over.jpg'" OnMouseOut="mytext.src='thumbnail_text.jpg'"><img src="thumb.jpg" name="thumb" border=0></a>

and the fun begins :D.

This is the explain of this little code.

href="#" means that your link is a blank link but you can write any link you need.
OnMouseOver this is a behavior of your link, when you pass your mouse over the link it's going to change the scr of mytext object image with thumbnail_text_over.jpg.
OnMouseOut this restore your image before you roll over your mouse.

And that's it..

You can use this to make rollover menus, only one disadvantage that this don't preload your images, so when you have big images it's take time to load, use carefully :D
  • Vladdrac
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2136
  • Loc: Louisville, Ky

Post 3+ Months Ago

maybe this link can help you...... http://wellstyled.com/css-nopreload-rollovers.html basically what dark is saying

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 29 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.