javascript/css: Сделать изображение расширенным и левым на эффект опрокидывания

Question

Я хочу, чтобы пользователи расширяли миниатюры, чтобы увидеть большой профиль pic на mouseover. Однако эффект опрокидывания, который у меня есть, в настоящее время расширяет строку таблицы до размера расширенного изображения, а не показывает изображение поверх окружающего текста. Может ли кто-нибудь предложить способ расширения изображений при опрокидывании, не перемещая текст вокруг, другими словами, отображая большее изображение поверх другого html, а не выталкивая его из строя. Я пробовал z-index, и это, похоже, не работает.

Вот jsfiddle, который демонстрирует проблему:

http://jsfiddle.net/gLr9Q/

Вот тот же код, как и в Js скрипкой:

<script language="JavaScript"> 
    <!-- hide from non JavaScript Browsers 
    image = new Array() 
    image[0]= new Image(24,24) 
    image[0].src = "http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" 
    image[1] = new Image(48,48) 
    image[1].src = "https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" 
</script> 
<tr><td colspan=2> 
<p align="center"> 
<a href="contactdetail.php" 
    onmouseover="newPic()" 
    onmouseout="oldPic()"> 
<img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" 
    name="pic" 
class="rollover" 
    border=0> 
</a> 
</p></td></tr> 
<tr><td>Here is text</td></tr> 

JS

function newPic(){ 
    document.pic.style.left="-24px"; 
    document.pic.style.top="-24px"; 
    document.pic.src = image[1].src; 
    return true; 
    } 

    function oldPic(){ 
    document.pic.src = image[0].src; 
    return true; 
    } 

CSS:

#rollover { 
    display: block; 
    z-index:99; 
    padding: 4px; 
    position:relative; 
    text-align:left; 
    width:48px; 
    background-color:#E8E8E8; 
    opacity:1.0; 
    filter:alpha(opacity=100); 
} 

Answer 1

Похищенные из CSSplay - magnify, вы можете сделать это без Javascript

HTML:

<tr> 
    <td colspan=2> 
     <p align="center"> <a class="rollover" href="contactdetail.php"> 
      <img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" name="pic" border="0"/> 
      <span><img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif"/></span> 
</a> 
     </p> 
    </td> 
</tr> 
<tr> 
    <td>Here is text</td> 
</tr> 

CSS:

a.rollover { 
    display: block; 
    position: relative; 
} 
a.rollover span { 
    position: absolute; 
    left: -10000px; 
} 
a.rollover:hover span { 
    position: absolute; 
    left: 200px; 
} 

JSFiddle

Update:

Я не знаю, если это то, что вы имеете в виду, но вы можете поместить увеличенное изображение в любом месте вы хотите

CSS:

a.rollover:hover span { 
    position: absolute; 
    left: 120px; 
    top: -20px; 
} 

JSFiddle

Если вы хотите чтобы скрыть нижнее изображение на парении, вы можете попробовать добавить opacity: 0

<img class="thumbnail" src="..."> 

и

a.rollover:hover .thumbnail { 
    opacity: 0; 
} 

JSFiddle

Хотя, я не знаю, если это работает в любом браузере.

Answer 2

Вы можете добавить что-то вроде этого:

#Text { 
    position:absolute; 
    top:48px; 
} 

где ваш текст в блочном элементе с ID Text. Updated fiddle.

Answer 3

способ сделать это, чтобы клонировать все <img> узлы, которые вы хотите, поместить их в <div> с, а затем использовать CSS-х :hover делать остальную работу за вас.example fiddle.
Мой код будет работать как можно больше <img> s в любом месте документа и не требует фиксированных размеров родительских узлов.
Возможно, вам придется изменить свой CSS или имена классов, которые я выбрал, если другие стили не так, как вы ожидали, из-за изменений в структуре HTML с помощью JavaScript (см. Ниже «Результат HTML»).

// JavaScript 
window.onload = function() { // when document has loaded, consider `window.addEventListener('load', /* code */, false);` in real world usage 
    var elm = document.querySelectorAll('img.rollover'), // get all <img>s with class "rollover" 
     i = elm.length, d; 
    while (--i >= 0) { // put each one and a clone into a <div> where it was 
     d = elm[i].parentNode.insertBefore(document.createElement('div'), elm[i]); 
     d.className = 'rollover'; 
     elm[i].className = (' '+elm[i].className+' ') // set class' 
          .replace(/ rollover /g, ' ') 
          .slice(1, -1); 
     d.appendChild(elm[i]); 
     d.appendChild(elm[i].cloneNode()).className += ' rollover_big'; // I did clone here to save needing an extra variable 
     elm[i].className += ' rollover_small'; 
    } 
}; 

/* CSS */ 
div.rollover {position: relative; display: block;} /* relative to allow for abs. positioning of big image */ 
div.rollover img.rollover_small {width: 24px;} 
div.rollover img.rollover_big { /* position over small image*/ 
    width: 48px; 
    display: none; 
    position: absolute; 
    top: 0px; 
} 

div.rollover:hover img.rollover_small {visibility: hidden;} /* visibility to hold space*/ 
div.rollover:hover img.rollover_big {display: block;} /* show bigger node*/ 

<!-- HTML --> 
<table> 
    <tr> 
     <td colspan=2><a href="contactdetail.php"><img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" class="rollover"/></a></td> 
    </tr> 
    <tr> 
     <td>Here is text</td> 
    </tr> 
    <!-- etc. --> 
</table> 

<!-- Resulting HTML after load event --> 
<table> 
    <tr> 
     <td colspan=2><a href="contactdetail.php"> 
      <div class="rollover"> 
       <img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" class="rollover_small"/> 
       <img src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" class="rollover_big"/> 
      </div> 
     </a></td> 
    </tr> 
    <tr> 
     <td>Here is text</td> 
    </tr> 
    <!-- etc. --> 
</table> 

Answer 4

Для этого вам не нужен javascript. См. working demo on jsFiddle.
ли это с CSS:

td.imgCell { 
    height: 40px; /* a value greater than image height + paddings */ 
    text-align: center; 
} 

img.rollover { 
    display: inline-block; 
    position: relative; 
    padding: 4px; 
    width: 24px; 
    height: 24px; 
    background-color:#E8E8E8; 
    border: 0px none; 
} 

img.rollover:hover { 
    position: absolute; 
    width: 48px; 
    height: 48px; 
    margin-top: -24px; 
    margin-left: -24px; 
    z-index: 99; 
} 

Вот измененное HTML:

<table> 
    <tr> 
     <td class="imgCell"> 
      <a href="contactdetail.php"> 
       <img class="rollover" src="http://womeninbiznetwork.com/wp-content/uploads/2011/07/logo-google.thumbnail.gif" /> 
      </a> 
     </td> 
    </tr> 
    <tr> 
     <td>Here is text</td> 
    </tr> 
</table> 

Обратите вниманием, что класс для контейнера тда также объявлен и установить: <td class="imgCell">

Ключевые моменты:

• Контейнер <td> должны иметь фиксированную высоту.
• Изображение должно быть absolute положение при наведении курсора.

Другие Исправления/Предложения:

• Вам не нужно атрибут colspan есть в вашем HTML. Атрибут colspan определяет количество столбцов, которые должна охватывать ячейка. Вам не нужно это делать, поскольку у вас есть один <td> в каждой строке (<tr>).
• Вам не нужен обертывающий тег <p> вокруг вашего тега привязки. Но это не так.

Если вы настаиваете на использовании этого кода JS;

• Вы должны также включать в себя //--> прямо перед </script> тега , поскольку у вас есть <!-- hide from non JavaScript Browsers в начала.
• Вы должны добавить точки с запятой в конце каждого оператора javascript. У вас их нет.
• Вы должны объявить переменную изображения с помощью var, иначе иначе будет находиться в глобальном масштабе.
• Вы должны инициализировать массив с помощью [] вместо new Array() как таких инструментов, как jsLint.