Skip to content

Commit

Permalink
added image swap javascript for use on contact page
Browse files Browse the repository at this point in the history
  • Loading branch information
Travis Berry committed May 10, 2010
1 parent c4365c7 commit 50a72b2
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 0 deletions.
1 change: 1 addition & 0 deletions footer.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<img src="http://www.travisberry.com/wp-content/themes/tbsite/images/footerimage.jpg" width="388" height="184" alt="Travis Berry" title="Travis Berry" />
</div></footer></div><?php wp_footer(); ?>
<script type="text/javascript" src="http://m.travisberry.com/mobify/redirect.js"></script>
<script type="text/javascript" src="http://www.travisberry.com/wp-content/themes/tbsite/imageswap.js"></script>
<script type="text/javascript">try{_mobify("http://m.travisberry.com/");} catch(err) {};</script>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
Expand Down
61 changes: 61 additions & 0 deletions imageswap.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
//If the browser is W3 DOM compliant, execute setImageSwaps function
if (document.getElementsByTagName && document.getElementById) {
if (window.addEventListener) window.addEventListener('load', setImageSwaps, false);
else if (window.attachEvent) window.attachEvent('onload', setImageSwaps);
}

//When document loads, apply the prepareImageSwap function to various images with our desired settings
function setImageSwaps() {
//Mousedown, restore - for images in container with ID=example2
prepareImageSwap('example2',true,true,true,true);
//Hover, mousedown, no restore - for images in container with ID=example3
prepareImageSwap('example3',true,false,true,false);
//Hover with restore, most basic usage - for any image in document.body that are not yet processed (function accepts elements,too)
prepareImageSwap(document.body);
//Note that once an image is processed, it won't be processed again, so you should set more specific images first, e.g. document.body, as it is the grand
//container, has to be processed last.
}


//The following is the function that do the actual job

function prepareImageSwap(elem,mouseOver,mouseOutRestore,mouseDown,mouseUpRestore,mouseOut,mouseUp) {
//Do not delete these comments.
//Non-Obtrusive Image Swap Script by Hesido.com
//V1.1
//Attribution required on all accounts
if (typeof(elem) == 'string') elem = document.getElementById(elem);
if (elem == null) return;
var regg = /(.*)(_nm\.)([^\.]{3,4})$/
var prel = new Array(), img, imgList, imgsrc, mtchd;
imgList = elem.getElementsByTagName('img');

for (var i=0; img = imgList[i]; i++) {
if (!img.rolloverSet && img.src.match(regg)) {
mtchd = img.src.match(regg);
img.hoverSRC = mtchd[1]+'_hv.'+ mtchd[3];
img.outSRC = img.src;
if (typeof(mouseOver) != 'undefined') {
img.hoverSRC = (mouseOver) ? mtchd[1]+'_hv.'+ mtchd[3] : false;
img.outSRC = (mouseOut) ? mtchd[1]+'_ou.'+ mtchd[3] : (mouseOver && mouseOutRestore) ? img.src : false;
img.mdownSRC = (mouseDown) ? mtchd[1]+'_md.' + mtchd[3] : false;
img.mupSRC = (mouseUp) ? mtchd[1]+'_mu.' + mtchd[3] : (mouseOver && mouseDown && mouseUpRestore) ? img.hoverSRC : (mouseDown && mouseUpRestore) ? img.src : false;
}
if (img.hoverSRC) {preLoadImg(img.hoverSRC); img.onmouseover = imgHoverSwap;}
if (img.outSRC) {preLoadImg(img.outSRC); img.onmouseout = imgOutSwap;}
if (img.mdownSRC) {preLoadImg(img.mdownSRC); img.onmousedown = imgMouseDownSwap;}
if (img.mupSRC) {preLoadImg(img.mupSRC); img.onmouseup = imgMouseUpSwap;}
img.rolloverSet = true;
}
}

function preLoadImg(imgSrc) {
prel[prel.length] = new Image(); prel[prel.length-1].src = imgSrc;
}

}

function imgHoverSwap() {this.src = this.hoverSRC;}
function imgOutSwap() {this.src = this.outSRC;}
function imgMouseDownSwap() {this.src = this.mdownSRC;}
function imgMouseUpSwap() {this.src = this.mupSRC;}

0 comments on commit 50a72b2

Please sign in to comment.