Как сделать так, чтобы img и текстовая ссылка ссылались на одно и то же место, и обе они становились активными при наведении курсора независимо от того, над чем я нахожусь?

Вы можете сделать это с помощью CSS или Javascript. Не зная вашей разметки и того, как расположены ваши элементы, невозможно определить, какой вариант лучше.

Параметр CSS

a:hover span { color:red; }
<a href="1.html">
  <img src="1.jpg" />
  <span>Title: One</span>
</a>

В этом примере у нас есть текст и изображение внутри ссылки. Затем мы изменяем цвет текста в событии :hover.

Javascript (JQuery)

div.hovered p { color:red; }

<div class="preview">
  <img src="1.jpg" />
  <p>Title: One</p>
</div>

$("div.preview img").hover(
  function () { $(this).parent().addClass("hovered"); },
  function () { $(this).parent().removeClass("hovered"); }
);

В этом примере демонстрируется решение, которое просто добавляет класс в родительский контейнер, который, в свою очередь, изменяет представление заголовка. Это событие управляется наведением курсора на изображение внутри контейнера.

Обновлять:

Позиционирование вашего текста не так сложно. Быстрый и простой способ — расположить родительский контейнер с относительным значением, а текст — с абсолютным:

<div class="container">
  <a href="#">
    <img src="1.jpg" />
    <span class="title">Hello World</span>
  </a>
</div>

div.container            { position:relative; width:150px; }
div.container span.title { position:absolute; top:0; left:50px; width:100px; }

Это быстрый пример. Вы можете изменить значения в соответствии с вашими потребностями.

Что о

<style>
a 
{ 
    color: #000000; 
}
a:hover 
{ 
    color: #a9a9a9; 
}
</style>

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>

На основе ответа Джонатана, но для javascript, если вы не используете jQuery:

<div onmousemove="hover('text1',true)" onmouseout="hover('text1',false)" >
  <img src="1.jpg" />
  <p id="text1">Title: One</p>
</div>

<script type="text/javascript">
function hover(elemID, on){
  element = document.getElementById(elemID);  
  if(on){
    element.style.color='red';
  }
  else
  {
    element.style.color='black';
  }
}
</script>

Мои извинения. Я неправильно прочитал ваш вопрос. Вот еще один удар по нему:

HTML

<div class="video">
    <a href="" title="title">
        <img alt="title" src="path/to/image" />
        Video Title
    </a>
</div>

CSS

    .video {
        line-height: 75px;
        margin: 10px;
        padding: 10px;
        width: 200px;   
    }
    .video img {
        float: left;
        margin-right: 15px; 
    }
    .video a:hover {
        color: #hexcol; 
    }
    .video:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden; 
    }

Очевидно, здесь есть некоторые стили, которые вам не нужны, но я использовал их для тестирования в браузере. Если вы хотите, чтобы ваш текст выровнялся по вертикали с миниатюрой видео, вам нужно установить для свойства line-height ту же высоту, что и миниатюра. Это переместит текст в середину видео.