PDA

View Full Version : Mouseover


bwetzel
10-11-2006, 06:01 AM
I am trying to add a mouseover script to my website. On this webpage http://www.brianandbreeze.com/baby2.htm I would like to be able to put my mouse on a pic, have a new window open with a bigger version hopefully I could stipulate the size and then close when the mouse leaves the picture.... and so on for each thumbnail. Is there anyone that can help.

Thank you
Brian

_Aerospace_Eng_
10-11-2006, 06:09 AM
Hmm the new window will probably be blocked by popup blockers. Maybe this will work for you. Instead of using onclick you can use onmouseover though if you are beginner you probably won't know how to edit the JS. http://www.huddletogether.com/projects/lightbox2/
If you do use that script to change from onclick to onmouseover you would change this line
var Lightbox = Class.create();

Lightbox.prototype = {

// initialize()
// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for
// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
// the function inserts html at the bottom of the page which is used to display the shadow
// overlay and the image container.
//
initialize: function() {
if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName('a');

// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];

var relAttribute = String(anchor.getAttribute('rel'));

// use the string.match() method to catch 'lightbox' references in the rel attribute
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
anchor.onclick = function () {myLightbox.start(this); return false;}
}
}

bwetzel
10-12-2006, 05:17 AM
yeahhhhhhh, that is kind of confusing, any one out there that can look at my source code and help me incorporate the code.
thanks

_Aerospace_Eng_
10-12-2006, 05:24 AM
Your images are way too big for the web. Your first mistake was loading the full size images and then resizing them using html. This creates a very long load time. I'm on cable and I almost left the site. Then when you click the images they are extremely large. You really need to reduce the size of the images. I say 640x480 will be okay. You should also make thumbnails of the images.