Динамическое изменение размера фонового изображения CSS

Question

Аналогичная проблема, с которой я столкнулся когда-то сейчас. У меня есть ссылка, которая имеет фоновое изображение, назначенное ему через css. У меня также есть изображение наведения для работы с ним. Я динамически изменяю размер изображения страницы, чтобы он мог изменять размер карты изображения. Я пытаюсь добавить Div, чтобы появился значок принтера, который вы можете навести мышью, и появится значок наведения. Когда я оставлю все в полном объеме, он будет работать, но как только я изменил размер фонового изображения и всплывающих окон imagemap, размер принтера изменится отлично, но фоновое изображение в div не изменится.

http://jsfiddle.net/trout0525/qfd58krc/1/

function mainLoad() { 

    var imageElement = document.getElementById('jDirBackground'); 
    imgScale = currentScale(imageElement); 
    alert("mainLoad imgScale: " + imgScale); 
    var mapElement = document.getElementById('jDirMap'); 
    var imageMap = new imageMapResize(mapElement, imgScale); 
    imageMap.resize(); 
    var printerIcon = new printerIconResize(imgScale); 
    printerIcon.resize(); 

    return; 
} 

Answer 1

ОК, я, наконец, нашел решение, которое я считаю разумным. Главное, что CSS3 недостаточно мощный, чтобы делать то, на что я надеялся, поэтому я немного поработал на диаграмме эволюции HTML.

http://jsfiddle.net/trout0525/qfd58krc/2/

Я надеялся, что CSS может обрабатывать графические изменения размера, но не похоже, чтобы быть в состоянии сделать это. Я сделал старую школу немного метания OnMouseOver и onmouseout:

onmouseover="imgHover(this)" onmouseout="imgLeave(this)" 

и код, чтобы встретить его:

function imgHover (x) { 
    x.src = "http://static.wixstatic.com/media/7a35ec_64af7af5864a4f2dad19c8c20855e532.jpg"; 
} 
function imgLeave (x) { 
    x.src = "http://www.mailersstore.com/images/SECAP-SA3150.jpg"; 
} 

тогда я должен был обрабатывать изменения размера в JavaScript этого:

function printerIconResize(imgScale) { 
    var position = $('#printerDiv').position(); 
    var divWidth = $('#printerDiv').width(); 
    var divHeight = $('#printerDiv').height(); 

    var iconWidth = $('#printerIcon_link').width(); 
    var iconHeight = $('#printerIcon_link').height(); 

    // Get on screen image 
    var screenImage = $("#printerIcon_link"); 

    // Create new offscreen image to test 
    var theImage = new Image(); 
    theImage.src = screenImage.attr("src"); 

    // Get accurate measurements from that. 
    iconWidth = theImage.width; 
    iconHeight = theImage.height; 

    this.resize = function() { 
     var newTop = position.top * imgScale; 
     var newLeft = position.left * imgScale; 
     var newDivWidth = parseInt((divWidth * imgScale), 10); 
     var newDivHeight = parseInt((divHeight * imgScale), 10); 
     var newIconWidth = parseInt((iconWidth * imgScale), 10); 
     var newIconHeight = parseInt((iconHeight * imgScale), 10); 

     $('#printerDiv').offset({ top: newTop, left: newLeft }); 
     $('#printerDiv').width(newDivWidth); 
     $('#printerDiv').height(newDivHeight); 
     $('#printerIcon_link').width(newIconWidth); 
     $('#printerIcon_link').height(newIconHeight); 

     newPosition = $('#printerDiv').position(); 
     newDivWidth = $('#printerDiv').width(); 
     newDivHeight = $('#printerDiv').height(); 
     newIconWidth = $('#printerIcon_link').width(); 
     newIconHeight = $('#printerIcon_link').height(); 
     return true; 
    }; 

    window.onresize = this.resize; 
} 

Для загрузки и перезагрузки страницы требуется некоторое время, но это лучшее, что я мог бы придумать сейчас. Если вы знаете лучший способ ...

Кстати, код JSFiddle не работает, но если вы сняли сайт и попробовали его, все должно быть хорошо, за исключением того, что imgHover и imgLeave фактически в области сценария в html-файле, а не в файле js.

Whew !!! Время для пива. (или трех)