VPF::Вид курсора при наведении на текст.

Ghirik

Дата 18.9.2007, 18:41 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Пишу функцию, вот сырой вариант.
Работает так. При наведении курсора мышки на один из контейнеров, создается объект(слой), которому назначаются размеры и положение такие же, как у контейнера, только z-index больше. Получается, что объект закрывает контейнер. В созданный слой заносится текст.
Проблема.
Можно ли назначить какие то свойства или атрибуты, чтобы при наведении курсора на текст, этот текст не распознавался, как текст? smile

Ну, в общем, посмотрите ссылку, там проблема видна.
Что можно сделать?

Да, этот вариант только для IE.

Ссылка может потом пропасть, smile

потому выкладываю код страницы.

Код


<!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>&nbsp;</td>
    </tr>
</table>
</div>
</body>
</html>

Это сообщение отредактировал(а) Ghirik - 18.9.2007, 18:44

--------------------

Отдадим всё клиенту, пускай его машина мучается...

dsCode

Дата 18.9.2007, 18:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 565
Регистрация: 8.9.2007
Где: Saint-Petersburg

Репутация: 19
Всего: 26

Задать диву в стиле курсор, одно из:

Код


cursor: crosshair
cursor: move
cursor: e-resize
cursor: ne-resize
cursor: nw-resize
cursor: n-resize
cursor: sw-resize
cursor: se-resize
cursor: s-resize
cursor: w-resize
cursor: text
cursor: wait
cursor: help

--------------------

the .code inside
:my music

Ghirik

Дата 18.9.2007, 19:14 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Спасибо, но проблема осталась. Когда курсор наводится на строки текста, (а текст в своих, вложенных тэгах), то это уже другой объект, и возникает событие mouseout.
Как сделать, чтобы при переходе на вложенные тэги не возникало событие mouseout? Или, какое условие можно проверить в обработчике, чтобы гарантированно знать, что курсор вышел за внешние габариты слоя, а не зашел на внутренний объект?

Добавлено через 4 минуты и 14 секунд
Не правильно назвал тему...

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Ghirik

Дата 18.9.2007, 19:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Как то нужно запретить распознавание текста под курсором. Такое ощущение, что когда под курсором распознался текст, происходит создание объекта вроде TextRange. Я пробовал удалить все тэги из дива, оставлял только текст, это не помогает.

Это сообщение отредактировал(а) Ghirik - 18.9.2007, 19:57

--------------------

Отдадим всё клиенту, пускай его машина мучается...

Ghirik

Дата 18.9.2007, 21:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20

Разобрался, исправил...
Всё же, виноваты были тэги внутри дива. Сейчас более-менее... работает...

--------------------

Отдадим всё клиенту, пускай его машина мучается...

InfMag

Дата 19.9.2007, 14:17 (ссылка)

(нет голосов)

Загрузка ...

…

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 21.11.2004

Репутация: 2
Всего: 4

да вроде проще css-ками сделать. на тэг body наложить и все smile

только фиг знает будет ли работать...

Добавлено через 10 минут и 37 секунд
Проверил smile

Работает:

Код


<html>
<head>
<style type="text/css">
body {
     cursor: default;
}
</style>
</head>
<body>
text text
</body>
</html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »