adding a mouseover to a link through javascript

Question

Simple quick question....

I have the following link html:

<a href="http://www.site.com/" onmouseover="" />

I have a javascript function which I want to enter some onmouseover information into that link dynamically. So, lets say it then becomes this for example if this javascript function is called:

<a href="http://www.site.com/" onmouseover="alert('howdy')" />

any ideas how to do this?

what do you mean? Do you want to start an action when the user has the mouse over your link and be able to change this action ? — Riccardo Galli, Feb 02 '11 at 11:11

score 7 · Answer 1 · answered Feb 02 '11 at 11:08

7

Add name attribute to and assign onmouseover

<a href="http://www.site.com/" onmouseover="" name="xxx"/> 
document.getelementsbyname('xxx').onmouseover = function() { alert('howdy') }

answered Feb 02 '11 at 11:08

RameshVel

64,778
30
169
213

2

The tag name here is "a" not "xxx". You would need to use getElementById and an `id` attribute – Greg B Feb 02 '11 at 11:10

score 2 · Accepted Answer · answered Feb 11 '11 at 10:36

2

Answer was, using setAttribute() javascript.

answered Feb 11 '11 at 10:36

David

16,246
34
103
162

score 0 · Answer 3 · answered Feb 02 '11 at 11:08

0

I think you want to say: dynamically change your href attribute information then you can do it by jquery

//Write code for prompt box and get value (when mouse-over)
$("a[href='http://www.google.com/']").attr('href', 'YOUR_GET_VALUE')

answered Feb 02 '11 at 11:08

Manish Trivedi

3,481
5
23
29

score 0 · Answer 4 · answered Feb 02 '11 at 11:11

If you can use jquery, see: http://api.jquery.com/hover/

This is better than changing the attribute directly. Your javascript function can dynamically bind/unbind the mouse hover event and execute your alert call.

Otherwise your javascript function will need to dynamically change the attribute but you'll need to work around browser differences to locate the correct element then locate and modify the onmouseover attribute.

score 0 · Answer 5 · answered Feb 02 '11 at 11:19

two options:

if it's something small:

<a href="http://www.site.com/" onmouseover="this.href = 'http://stackoverflow.com'" />

if you have something more to do:

<script type="text/javascript">
    function doSomething(elem) {
        elem.href = 'http://stackoverflow.com';
    }
</script>
<a href="http://www.site.com/" onmouseover="doSomething(this)">test</a>

Or as stated before: use jQuery or any other framework to make your life a lot easier

score 0 · Answer 6 · answered Jan 17 '20 at 15:06

The following works for jQuery every time

first the javascript:

  $(document).on('mouseenter','.hovLink', function (e) {
       e.preventDefault();
       e.stopPropagation();
       alert('entering ' + e.target.id);
  }).on('mouseleave','.hovLink', function (e) {
       alert('exiting ' + e.target.id);
  });

and here is the HTML

<a href="/link" class="hovLink" id="link1">Link</a>

adding a mouseover to a link through javascript

6 Answers6