Распознавание браузером текста внутри слоя
Пишу функцию, вот сырой вариант.
Работает так. При наведении курсора мышки на один из контейнеров, создается объект(слой), которому назначаются размеры и положение такие же, как у контейнера, только z-index больше. Получается, что объект закрывает контейнер. В созданный слой заносится текст.
Проблема.
Можно ли назначить какие то свойства или атрибуты, чтобы при наведении курсора на текст, этот текст не распознавался, как текст?
Ну, в общем, посмотрите ссылку, там проблема видна.
Такое ощущение, что когда под курсором распознался текст, происходит создание объекта вроде TextRange. Я пробовал удалить все тэги из дива, оставлял только текст, это не помогает.
Что можно сделать?
Да, этот вариант только для IE.
Вот код страницы, на всякий случай.
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Lamer Editor</title>
<script type="text/javascript">
<!--
if (/*@cc_on 1 | @*/ 0){document.write('<script type="text/javascript" src="ie_code.js">' + '</sc' + 'ript>')}
else{document.write('<script type="text/javascript" src="ff_code.js">' + '</sc' + 'ript>')}
//-->
</script>
<STYLE type="text/css">
<!--
textarea {position: relative; border-style:outset; border-width:0; overflow: hidden; background-color:#BFBECD; font-family:Arial; font-size:12pt; font-weight:bold}
.none {color: #FF0000; font-size: 14pt; font-weight: bold}
-->
</STYLE>
<script type="text/javascript">
<!--
$=function(id){return document.getElementById('id')}
$TagsName=function(tag){return document.getElementsByTagName('tag')}
$mixin=function (obj1,obj2){for(var n in obj2)obj1[n]=obj2[n]}
function Substitution(e){
var div=document.createElement("div")
div.id=this.id+'_div_mobil'
$mixin(div.style,{position: "absolute", top: this.offsetTop+'px', left: this.offsetLeft+'px', width: this.offsetWidth+'px', height: this.offsetHeight+'px', zIndex: 2, backgroundColor: '#BFBECD'})
div.style.filter='alpha(opacity=0)'
div.onmouseout=ReturnImage
div.onclick=Blank
document.body.appendChild(div)
if (this.tagName=='IMG'){
div.innerHTML='<br><br><p align=center><b><font size=4>Please click for<br>change this images</font></b></p>'}
else{
div.innerHTML='<br><br><p align=center><b><font size=4>Please click for editing this text</font></b></p>'}
eff(div)
}
function ReturnImage(){
eff(this)
}
function Blank(e){
alert(this.id)
}
function ok(){
document.getElementById('i1').onmouseover=Substitution
document.getElementById('txt1').onmouseover=Substitution
}
var z=new Array()
var timer=new Array()
function eff(i){
if (timer[i.id]){clearInterval(timer[i.id])}
if ((window.event.type)!='mouseover'){z[i.id]=-2;var t=10}
else{z[i.id]=5;var t=5}
timer[i.id]=setInterval(function (i){return function(){ time(i)}}(i),t)}
function time(i){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity
if (c<=0){i.filters.alpha.opacity=0;clearInterval(timer[i.id]);document.body.removeChild(i);return}
if (c>=100){i.filters.alpha.opacity=100;clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body bgcolor=#BFBECD style="margin: 0; padding: 0; font-family:Arial; font-size:10pt" onload=ok()>
<p style="display: none" align=center style="color: #FF0000; font-size: 14pt; font-weight: bold">
<b>
Resolve performance JavaScript to your browser</b></p>
<div id=div1 style="width: 100%; height: 100%; top: 0; left: 0" align=center>
<textarea name=txt0 cols=60 rows=3></textarea>
<input value="HTML" type="button" onclick=alert(document.body.innerHTML)>
<table id=tab1 border=1 width="65%" cellspacing=0 cellpadding=0>
<tr>
<td>
<img id=i1 src="img/0.jpg" width=220 style="position: relative">
</td>
<td>
<form method=POST action=#>
<p>
<div>
<p style="margin-top: 0; margin-bottom: 0"><textarea id=txt1 cols=50 rows=5></textarea></div>
</p>
</form>
</td>
</tr>
<tr>
<td>
<form method=POST enctype="multipart/form-data" action=#>
<p align="center">
<input type=file name=f1 style="float: right" size=19></p>
</form>
</td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>[/HTML]
Работает так. При наведении курсора мышки на один из контейнеров, создается объект(слой), которому назначаются размеры и положение такие же, как у контейнера, только z-index больше. Получается, что объект закрывает контейнер. В созданный слой заносится текст.
Проблема.
Можно ли назначить какие то свойства или атрибуты, чтобы при наведении курсора на текст, этот текст не распознавался, как текст?
Ну, в общем, посмотрите ссылку, там проблема видна.
Такое ощущение, что когда под курсором распознался текст, происходит создание объекта вроде TextRange. Я пробовал удалить все тэги из дива, оставлял только текст, это не помогает.
Что можно сделать?
Да, этот вариант только для IE.
Вот код страницы, на всякий случай.
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Lamer Editor</title>
<script type="text/javascript">
<!--
if (/*@cc_on 1 | @*/ 0){document.write('<script type="text/javascript" src="ie_code.js">' + '</sc' + 'ript>')}
else{document.write('<script type="text/javascript" src="ff_code.js">' + '</sc' + 'ript>')}
//-->
</script>
<STYLE type="text/css">
<!--
textarea {position: relative; border-style:outset; border-width:0; overflow: hidden; background-color:#BFBECD; font-family:Arial; font-size:12pt; font-weight:bold}
.none {color: #FF0000; font-size: 14pt; font-weight: bold}
-->
</STYLE>
<script type="text/javascript">
<!--
$=function(id){return document.getElementById('id')}
$TagsName=function(tag){return document.getElementsByTagName('tag')}
$mixin=function (obj1,obj2){for(var n in obj2)obj1[n]=obj2[n]}
function Substitution(e){
var div=document.createElement("div")
div.id=this.id+'_div_mobil'
$mixin(div.style,{position: "absolute", top: this.offsetTop+'px', left: this.offsetLeft+'px', width: this.offsetWidth+'px', height: this.offsetHeight+'px', zIndex: 2, backgroundColor: '#BFBECD'})
div.style.filter='alpha(opacity=0)'
div.onmouseout=ReturnImage
div.onclick=Blank
document.body.appendChild(div)
if (this.tagName=='IMG'){
div.innerHTML='<br><br><p align=center><b><font size=4>Please click for<br>change this images</font></b></p>'}
else{
div.innerHTML='<br><br><p align=center><b><font size=4>Please click for editing this text</font></b></p>'}
eff(div)
}
function ReturnImage(){
eff(this)
}
function Blank(e){
alert(this.id)
}
function ok(){
document.getElementById('i1').onmouseover=Substitution
document.getElementById('txt1').onmouseover=Substitution
}
var z=new Array()
var timer=new Array()
function eff(i){
if (timer[i.id]){clearInterval(timer[i.id])}
if ((window.event.type)!='mouseover'){z[i.id]=-2;var t=10}
else{z[i.id]=5;var t=5}
timer[i.id]=setInterval(function (i){return function(){ time(i)}}(i),t)}
function time(i){
i.filters.alpha.opacity+=z[i.id]
c=i.filters.alpha.opacity
if (c<=0){i.filters.alpha.opacity=0;clearInterval(timer[i.id]);document.body.removeChild(i);return}
if (c>=100){i.filters.alpha.opacity=100;clearInterval(timer[i.id]);return}
}
//-->
</script>
</head>
<body bgcolor=#BFBECD style="margin: 0; padding: 0; font-family:Arial; font-size:10pt" onload=ok()>
<p style="display: none" align=center style="color: #FF0000; font-size: 14pt; font-weight: bold">
<b>
Resolve performance JavaScript to your browser</b></p>
<div id=div1 style="width: 100%; height: 100%; top: 0; left: 0" align=center>
<textarea name=txt0 cols=60 rows=3></textarea>
<input value="HTML" type="button" onclick=alert(document.body.innerHTML)>
<table id=tab1 border=1 width="65%" cellspacing=0 cellpadding=0>
<tr>
<td>
<img id=i1 src="img/0.jpg" width=220 style="position: relative">
</td>
<td>
<form method=POST action=#>
<p>
<div>
<p style="margin-top: 0; margin-bottom: 0"><textarea id=txt1 cols=50 rows=5></textarea></div>
</p>
</form>
</td>
</tr>
<tr>
<td>
<form method=POST enctype="multipart/form-data" action=#>
<p align="center">
<input type=file name=f1 style="float: right" size=19></p>
</form>
</td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>[/HTML]
Цитата: Ghirik
При наведении курсора мышки на один из контейнеров, создается объект(слой),
Объект это не слой, див это не слой и спан тоже это не слой. Слой это слой. На этом я настаивал, настаиваю и буду настаивать!
http://forum.codenet.ru/showthread.php?t=39327
Цитата: Ghirik
Проблема.
Можно ли назначить какие то свойства или атрибуты, чтобы при наведении курсора на текст, этот текст не распознавался, как текст?
А что это значает? Текст не распознвался как текс.... что значит "распознавался"? Почему именно "не как текст"? А как что? Двоичные данные? Растр? Etc?
Цитата:
Слой это слой. На этом я настаивал, настаиваю и буду настаивать!
:D Я считаю, что объект принадлежит к тому или иному слою, определенному его z-индексом. Т.е., для меня слой, это z-Index. Но так, как я создал только один элемент с таким индексом, то он является достойным представителем своего слоя.:) :eek:
По теме.
Разобрался, исправил...
Всё же, виноваты тэги внутри дива, сейчас всё более-менее нормально.
Цитата: Ghirik
Но так, как я создал только один элемент с таким индексом, то он является достойным представителем своего слоя.:) :eek:
Да. Но все же не стоит смещивать эти разные понятия.