Neat Little Picture Rollover Effect I Stumbled Upon In Namo

Greenguy · 2012-10-16, 08:58 PM

When I was making sites today, I finally decided to click the button in Namo 5 that says "Create Rollover" when I was adding an image. You can see what it does on the warning page of Audrey Elson Is An Extreme Pornstarlette by simply putting your mouse on the preview thumb located in the middle on the left.

If you have a basic knowledge of html, I think you can figure out how to code it by looking at the source (Namo 5 did it all for me)

But, I assume you put this javascript in the <head>:

Code:

<script language="JavaScript">
<!--
function na_preload_img()
{ 
  var img_list = na_preload_img.arguments;
  if (document.preloadlist == null) 
    document.preloadlist = new Array();
  var top = document.preloadlist.length;
  for (var i=0; i < img_list.length; i++) {
    document.preloadlist[top+i] = new Image;
    document.preloadlist[top+i].src = img_list[i+1];
  } 
}

function na_change_img_src(name, nsdoc, rpath, preload)
{ 
  var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
  if (name == '')
    return;
  if (img) {
    img.altsrc = img.src;
    img.src    = rpath;
  } 
}

function na_restore_img_src(name, nsdoc)
{
  var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
  if (name == '')
    return;
  if (img && img.altsrc) {
    img.src    = img.altsrc;
    img.altsrc = null;
  } 
}

// -->
</script>

And then code the images like this:

Code:

<a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" OnMouseOver="na_change_img_src('image1', 'document', '2.jpg', true)"><img src="1.jpg" width="384" height="216" border="0" alt="Audrey Elson Is An Extreme Pornstarlette" name="image1">

Where 1.jpg is the main image and 2.jpg is the image you see when you mouseover it.

Just one of those things that I think is cool & wanted to share with you good people

You also might want to put your mouse on the

at the bottom

Pagan · 2012-10-17, 12:13 AM

Nice effect.... I know that mouseovers don't work with mobile traffic. What about iPad?

2012-10-16, 08:58 PM	#1
Greenguy The Original Greenguy (Est'd 1996) & AVN HOF Member - I Crop Pics For Thumbs In My Sleep Join Date: Feb 2003 Location: Blasdell, NY (shithole suburb south of Buffalo) Posts: 41,800	Neat Little Picture Rollover Effect I Stumbled Upon In Namo When I was making sites today, I finally decided to click the button in Namo 5 that says "Create Rollover" when I was adding an image. You can see what it does on the warning page of Audrey Elson Is An Extreme Pornstarlette by simply putting your mouse on the preview thumb located in the middle on the left. If you have a basic knowledge of html, I think you can figure out how to code it by looking at the source (Namo 5 did it all for me) But, I assume you put this javascript in the <head>: Code: <script language="JavaScript"> <!-- function na_preload_img() { var img_list = na_preload_img.arguments; if (document.preloadlist == null) document.preloadlist = new Array(); var top = document.preloadlist.length; for (var i=0; i < img_list.length; i++) { document.preloadlist[top+i] = new Image; document.preloadlist[top+i].src = img_list[i+1]; } } function na_change_img_src(name, nsdoc, rpath, preload) { var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name); if (name == '') return; if (img) { img.altsrc = img.src; img.src = rpath; } } function na_restore_img_src(name, nsdoc) { var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name); if (name == '') return; if (img && img.altsrc) { img.src = img.altsrc; img.altsrc = null; } } // --> </script> And then code the images like this: Code: <a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" OnMouseOver="na_change_img_src('image1', 'document', '2.jpg', true)"><img src="1.jpg" width="384" height="216" border="0" alt="Audrey Elson Is An Extreme Pornstarlette" name="image1"> Where 1.jpg is the main image and 2.jpg is the image you see when you mouseover it. Just one of those things that I think is cool & wanted to share with you good people You also might want to put your mouse on the at the bottom __________________ Promote POV Porn Cash By Building & Submitting Galleries to the Porn Luv Network

2012-10-17, 12:13 AM	#2
Pagan Perverted Empress Join Date: Feb 2005 Location: Finland Posts: 4,689	Nice effect.... I know that mouseovers don't work with mobile traffic. What about iPad? __________________ So, who sprinkled all that Bitchy dust?