How to get a-link (a href) background image in css to resize with javascript code -

How to get a-link (a href) background image in css to resize with javascript code -

i've been racking brain trying 2 problems figured out. 1 image cropping , other , image resizing one. here overview of code have:

html code:

<script src="main.js"></script> <div class="maindiv"> <div class="columndiv1"> <!-- div here div there --> </div> <div class="columndiv2"> <div class="icondiv1"><a href="/area1/index.html" id="icondiv1_link">icon 1</a></div> <div class="icondiv2"><img src="/images/div2icon.png" id="div2iconimg" width="1" /></div> </div> <div class="columndiv3"> <!-- div here div there --> </div> <div class="bottomrowdiv"> <!-- div here div there --> </div> </div>

css code:

<style type="text/css"> .maindiv { z-index: 2; float: left; width: 1112px; position: relative; overflow: hidden; } .columndiv1 { z-index: 20; position: absolute; width: 33.36%; padding: 0px; float: left; border: 0px solid; } .columndiv2 { z-index: 20; position: absolute; width: 30.31%; padding: 0px; float: left; border: 0px solid; } .columndiv3 { z-index: 20; position: absolute; width: 36.33%; padding: 0px; float: left; border: 0px solid; } .bottomrowdiv { z-index: 20; position: absolute; width: 100%; padding: 0px; float: left; border: 0px solid; } /* stuff in here columndiv1 */ .icondiv1 { z-index: 20; position: absolute; width: 100%; left: 0px; top: 0px; padding-top: 0px; padding-left: 0px; padding-bottom: 75px; padding-right: 0px; float: left; border: 0px solid; } .icondiv2 { z-index: 20; position: absolute; width: 100%; left: 0px; top: 0px; padding: 0px; float: left; border: 0px solid; } /* stuff in here columndiv3 */ /* stuff in here bottomrowdiv */ #icondiv1_link { display:block; text-indent: -10000px; background: url(/images/div1.png) no-repeat; background-position: center top; } #icondiv1_link:hover { background-image: url(/images/div1hover.png); } </style>

javascript code:

_spbodyonloadfunctionnames.push('sizeimagemap()'); function sizeimagemap() { // screen info var currentscreenwidth = screen.width; var currentscreenheight = screen.height; // images' info //define image icon hash keys var imgiconhash = {}; imgiconhash['image1_link'] = {}; ... ... imgiconhash['icondiv1_link'] = {}; imgiconhash['div2iconimg'] = {}; ... ... (var imglinkname in imgiconhash){ var imglink = document.getelementbyid(imglinkname); if (imglink.nodename === "a") { imglinkstyle = imglink.currentstyle || window.getcomputedstyle(imglink, false); imgiconhash[imglinkname]['src']=imglinkstyle.backgroundimage.replace(/url\((['"])?(.*?)\1\)/gi, '$2').split(',')[0]; } else if (imglink.nodename === "img") { imgiconhash[imglinkname]['src']=imglink.getattribute('src'); } else { // not or img nodes } // image width , height var tmpimg = new image(); imgiconhash[imglinkname]['width']=tmpimg.width; imgiconhash[imglinkname]['height']=tmpimg.height; } // initialize scaling factors var imgscale = 1; //set scaling factors if(currentscreenheight >= /*given amount*/ ) // set scale { imgscale = 0.5676; // reset image scale } else { imgscale = 0.3784; // reset image scale } //resize images (var imglinkname in imgiconhash){ var imglink = document.getelementbyid(imglinkname); if (imglink.nodename === "a") { imglink.style.background.width = imgiconhash[imglinkname]['width'] * imgscale + "px"; imglink.style.background.height = imgiconhash[imglinkname]['height'] * imgscale + "px"; } else if (imglink.nodename === "img") { imglink.style.width = imgiconhash[imglinkname]['width'] * imgscale + "px"; imglink.style.height = imgiconhash[imglinkname]['height'] * imgscale + "px"; } } }

note, webpage content part in sharepoint, hence "_spbodyonloadfunctionnames.push('sizeimagemap()');" perform operation similar document.onload.

so, 2 problems having:

the image in 'columndiv2' of 'icondiv1' seems beingness cropped. it's size 322px width , 128px height. left , top don't appear beingness cropped, bottom , right appear, or more so, don't appear, though have been cropped. have 7 other images in code handled same way, , have no problems them, 1 appears have problem. it's not noticeable on first loaded image, on image shows after 'hover', can see cropping.

i can img's width , height, not a-href link's background width , height. direction helpful. also, doing images can resized. note links id's , not class's, unable find easy way access existing images width , height, before loading, , how resize a-href link's size after getting it. said, img works fine, doesn't want cooperate.

thank in advance.

javascript css image hyperlink resize