Подсветка слова и перевода (как в Google Translate)
Вложений: 1
Здравствуйте уважаемые форумчане!
Необходимо реализовать подсветку слова и его перевода, как в Google Translate (смотреть скрин) Решение придумал (банально каждому слову во фразе присваивать свой класс и изменять св-во background), но оно, мягко говоря, не рациональное(( Может кто-нибудь уже делал что-то подобное?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
a{
text-decoration: none;
background: #ffffff;
}
</style>
<!-- Скрипт подцветки синтаксиса -->
<script type="text/javascript">
function _hover(id){
var elems = document.getElementsByClassName(id);
for (var i = elems.length - 1; i >= 0; i--) {
elems[i].style.backgroundColor = "yellow";
};
}
function _out(id){
var elems = document.getElementsByClassName(id);
for (var i = elems.length - 1; i >= 0; i--) {
elems[i].style.backgroundColor = "#ffffff";
};
}
</script>
</head>
<body>
<h2><a class="how" onmouseover ="_hover('how')" onmouseout ="_out('how')">How</a>
<a class="would" onmouseover ="_hover('would')" onmouseout ="_out('would')">would</a>
<a class="you" onmouseover ="_hover('you')" onmouseout ="_out('you')">you</a>
<a class="describe" onmouseover ="_hover('describe')" onmouseout ="_out('describe')">describe</a>
<a class="yourself" onmouseover ="_hover('yourself')" onmouseout ="_out('yourself')">yourself</a> as a person?</h2>
<p><a class="how" onmouseover ="_hover('how')" onmouseout ="_out('how')">Как</a>
<a class="would" onmouseover ="_hover('would')" onmouseout ="_out('would')">бы</a>
<a class="you" onmouseover ="_hover('you')" onmouseout ="_out('you')">вы</a> сами
<a class="yourself" onmouseover ="_hover('yourself')" onmouseout ="_out('yourself')">себя</a>
<a class="describe" onmouseover ="_hover('describe')" onmouseout ="_out('describe')">описали?</a></p>
</body>
</html>
|
| Часовой пояс GMT +3, время: 06:18. |