| |
|
|
| | Hi
Имеются две картинки
image.png
---------------------------------
| |---------------------- ---====|
| | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;|====|
| | Transparent area;|====|
| | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;|====|
| | ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;|====|
| |_____________ _|====|
|____________________|
и image.jpg (без прозрачности)
Следующий код
<div tyle="position: relative; height: 100%; width: 100%; z-index: 3;
visibility: visible; overflow: hidden;">
<div id="page_image" style=" position: absolute; width: 564 ;
z-index: 1; left: 0px; top: 0px; overflow: hidden; alignX: 100;"
onmouseup="alert('MouseUp Fired!');">
<img class="dragclass" id="page_imagePort-image"
src="image.jpg" width="900" height="608" style="cursor:
move;position: relative; left: 0px; top: 0px;" alt="" />
</div>
<div id="layer_s" style="position: absolute; width: 578 ; z-
index: 2; left: 0px; top: 0px; visibility: visible;">
<img id="plastic" src="Image.png" width="898"
height="566" />
</div>
</div>
в Интернет Експлорере
1. меняет форму курсора при перемещение на image.jpg (в прозрачной области layer_s).
2. выдает алерт при клике в перечисленной выше области.
В FireFox не работает. Может кто-то знает как это можно делать и для FireFox?
Спасибо | |
| |
|
|
| |
|
|
| |
для: JollyRoger
(19.08.2009 в 17:53)
| | | 1. В стилях для кроссбраузерности необходимо указывать размерность.
width: 578 ; - неправильно
надо width: 578px;
|
2. Незачем использовать конструкцию <div style="правила CSS"><img></div>
Её вполне можно (и нужно) заменить на <img style="правила CSS">
3. Изобразите вашу схему внутри псевдотегов выделения текста "Код"
Тогда, наверно, можно будет понять - что вы хотите получить. | |
| |
|
|
| |
 273 Кб |
|
| |
для: PAT
(19.08.2009 в 18:45)
| | | Буду точнее
1. есть картинка image.jpg
2. и image.png которая имеет прзрачную область
Эти картинки накладываются слоями причем png верхний слой таким образом чтоб | |
| |
|
|
| |
341.8 Кб |
|
| |
для: PAT
(19.08.2009 в 18:45)
| | | Сорри
Буду точнее
1. есть картинка image.jpg
2. и image.png которая имеет прозрачную область
(приатачены в zip)
Эти картинки накладываются слоями причем png верхний слой таким образом чтоб jpg была видна только в прозрачной части png, Надо захватить события mouse только на видимом участке jpg чтоб движением мышки можно было позиционировать jpeg а нажатием кнопок маштабировать.
HTML на которм можно это делать дан ниже. Но это только в IE (в идеале было бы чтобы ннезавизило от браузера) но мин требуется чтоб работала и в FireFox
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
if (window.captureEvents){
window.addEventListener("load",correctPNG,true);
}
else {
window.attachEvent("onload", correctPNG);
}
function correctPNG(e) {
for (var i = 0; i < document.images.length; i++) {
var img = document.images[i];
var imgName = img.src.toUpperCase();
if (imgName.substring(imgName.length - 3, imgName.length) == "PNG") {
var imgID = (img.id) ? "id='" + img.id + "' " : "";
var imgClass = (img.className) ? "class='" + img.className + "' " : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
var imgStyle = "display:inline-block;" + img.style.cssText;
var a2=img.parentNode;
if (img.align == "left") {
imgStyle = "float:left;" + imgStyle;
}
if (img.align == "right") {
imgStyle = "float:right;" + imgStyle;
}
if (img.parentNode.href) {
imgStyle = "cursor:hand;" + imgStyle;
}
var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" + "(src='" + img.src + "', sizingMethod='scale');\"></span>";
img.outerHTML = strNewHTML;
}
}
}
</script>
</head>
<body>
<br>
<table width="900" height="570">
<tr>
<td style="overflow: hidden">
<div
style="position: relative; height: 100%; width: 100%; z-index: 3; visibility: visible; overflow: hidden">
<div id="page_imagePort"
style="position: absolute; width: 564px; z-index: 1; left: 0px; top: 0px; alignX: 100">
<img id="page_imagePort-image" src="image.jpg" width="900" height="608"
style="cursor: move; position: relative; left: 0px; top: 0px" alt="" onmouseup="alert('MouseUp Fired!');"/>
</div>
<div id="Layer3"
style="position: absolute; width: 578px; z-index: 2; left: 0px; top: 0px; visibility: visible; -moz-opacity: 1">
<img id="plastic" src="Image.png" width="898" height="566" /></div>
</div>
</td>
</tr>
</table>
<br>
</body>
</html> | |
| |
|
|
