addEvenListener with parameters

D

dennis.sprengers

I wrote a function that browses through the DOM in search for images
with a "tooltip" class. When found, it adds a mouseover event
(createTooltip), but without parameters. createTooltip expects an
image element as input, though:

<img id="img_1" class="tooltip" src="image.png" title="some more
info!">

function findTooltips() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var image = images;
if (hasClass(image, 'tooltip')) {
addEvent(image, 'mouseover', createTooltip); // no parameters!
}
}
}

function createTooltip(element) {
alert(element.title); // should return "some more info!"
}

In short: who could help me rebuild findTooltips to call createTooltip
with a parameter? Any help would be greatly appreciated!
 
T

Thomas 'PointedEars' Lahn

I wrote a function that browses through the DOM in search for images
with a "tooltip" class. When found, it adds a mouseover event
(createTooltip), but without parameters. createTooltip expects an
image element as input, though:

<img id="img_1" class="tooltip" src="image.png" title="some more
info!">

function findTooltips() {
var images = document.getElementsByTagName('img');
Click to expand...

var images = document.images;

is not less standards compliant but more efficient.
for (var i = 0; i < images.length; i++) {
var image = images;
if (hasClass(image, 'tooltip')) {
addEvent(image, 'mouseover', createTooltip); // no parameters!
}
}
}

function createTooltip(element) {
alert(element.title); // should return "some more info!"
Click to expand...


It can not because the first argument of the event listener is a reference
to an Event object, not to the event target.
}

In short: who could help me rebuild findTooltips to call createTooltip
with a parameter? Any help would be greatly appreciated!
Click to expand...

You should not be helped because you have jumped off the same cliff as the
other in[ae]pt "Unobtrusive JavaScript" lemmings. But I am willing to make
an exception here.

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function createTooltip(s)
{
// check here whether the tooltip already exists
}

function handleMouseover(e)
{
if (e)
{
var t = e.target || e.srcElement;
if (t && /^\s*img\s*$/i.test(t.tagName)
&& /\btooltip\b/i.test(t.className))
{
createTooltip(t.title);
}
}
}
</script>
</head>

<body
onmouseover="if (typeof event != 'undefined') handleMouseover(event);">
...
</body>


HTH

PointedEars
 
S

SAM

(e-mail address removed) a écrit :
In short: who could help me rebuild findTooltips to call createTooltip
with a parameter? Any help would be greatly appreciated!
Click to expand...



Without parameter : (works too with addEvent() on my Fx)
===================

<img id="img_1" class="tooltip" src="image.png" title="some more
info!">

function findTooltips() {
var images, image;
images = document.images;
for (var i = 0; i < images.length; i++) {
image = images;
if(image.className && image.className=='tooltip') {
image.onmouseover = createTooltip; // no parameters!
}
}
}

function createTooltip() {
alert(this.title); // will return "some more info!"
}



With parameter :
================

<img id="img_1" class="tooltip" src="image.png" title="some more
info!">

function findTooltips() {
var images = document.images;
for (var i = 0; i < images.length; i++) {
var image = images;
if(image.className && image.className=='tooltip') {
image.onmouseover = function() { createTooltip(this); };
}
}
}

function createTooltip(element) {
alert(element.title); // should return "some more info!"
}
 
D

dennis.sprengers

Thanks, PointedEars and SAM. Especially PointedEars for helping out
yet another lemming ;-) I have been trying different approaches to
this problem myself in the mean time and (after visitong countless
forums) came up with this "solution" myself. It browses the DOM for
images, attaches a mouseover and mouseout event, creates the tooltip
div and makes it appear and disappear when it's supposed to. Mind you
- I yet have to alter findTooltips so they reflect your comments:

function findTooltips() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var image = images;
if (hasClass(image, 'tooltip')) {
addEvent(image, 'mouseover', function()
{toggleTooltip.apply(this, [image]);});
addEvent(image, 'mouseout' , function()
{toggleTooltip.apply(this, [image]);});
}
}
}

function toggleTooltip(el) {
var tooltip = document.getElementById('tip_' + el.id);
if (tooltip != null) {
var style = tooltip.style.visibility;
tooltip.style.visibility = (style == 'visible') ? 'hidden' :
'visible';
}
else {
var div = document.createElement('div');
div.id = 'tip_' + el.id;
div.className = 'tooltip';
div.style.position = 'absolute';
div.style.visibility = 'visible';

// div.style.left = ...px;
// div.style.top = ...px;

div.innerHTML = el.alt;
document.body.appendChild(div);
}
}

Now my problem is: the image which initiates a tooltip can be anywhere
on the webpage. I want the tooltip-div to appear directly beneath the
image, so I have to define a left and right style-property for the
tooltip-div. So I have to read the coordinates (?) of the image.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

? Trouble with: passing dragElement(e.target.id); 8
Only one table shows up with the information 2
Help with code 0
I am trying to detect Which image id="" was clicked ? 22
Help with my responsive home page 2
How do I fix this issue in sqaurespace code block? 1
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
toString Method with Parameters 13

Members online

Total: 2,074 (members: 1, guests: 2,073)
Robots: 128

Forum statistics

Threads
474,148
Messages
2,570,838
Members
47,385
Latest member
Joneswilliam01

Latest Threads

Top