Image and Text display on mouseover

[Maxi]

There is a very good javascript available at the following link that
displays image and text wherever mouse follows a link.
http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

I have a question and not sure who to ask.

I used this script and it is working fine. I changed those two images
and put my own. Image1 is of 600 width and 340 height and Image2 is of
560 width and 794 height.

The code is working fine but the tool tip window resizes automatically
and shows up the image. How can I have a fixed height and width? Which
line should I change so that the height and width of the tooltip window
is constant?

I tried changing var tipWidth = 160; but no effect
tried playing with var startStr = '<table width="' + tipWidth + '"><tr>
but again no effect.

Can anybody help? I want the tooltip window to be constant and the
picture size should be resized to fit in that tooltip window and aspect
ratio for height and width should be resized automatically.

 

[Maxi]

I changed those two images

and put my own. Image1 is of 600 width and 340 height and Image2 is of
560 width and 794 height.

Here is the link for images
Image1: http://www.picturemounts.co.uk/images/sample.jpg - I named it
as red.jpg
Image2:
http://www.poopsheetfoundation.com/covers/shop-sample-pages/cruel-world-1-sample.jpg
- I named it as blue.jpg

 

[Thomas 'PointedEars' Lahn]

There is a very good javascript available at the following link that
displays image and text wherever mouse follows a link.
http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

Not at all.

I have a question and not sure who to ask.

| Author: Sharon Paine


PointedEars

 

[optimistx]

Not at all.


| Author: Sharon Paine


PointedEars

You assumably mean that the code is not very good? If so, compared to what?
To code which you could imagine to write if you had some weeks extra time to
write it? Or compared to some existing code? If so,where is it?
I appreciate your opinions with more than 2-10 characters , and I
appreciate your character with more than 2-10 opinions.

 

[Lasse Reichstein Nielsen]

You assumably mean that the code is not very good? If so, compared to what?

It does look bad, based on one of the most traditional signs of bad
Javascript: browser detection.

It doesn't appear to work in my browser (Opera). That's the best argument
against the code (it doesn't work!).
That's a typical result of using browser detection. The code specifically
states:
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
I.e., it should only be assumed to work in Netscape 4 or 5
(i.e. Mozilla) and IE 4 or 5.

Luckily for the author, IE 6 manages to make the ie5 variable true,
but it could just as well have not done so. That's one of the dangers
of browser detection - especially if there is no default to use if
detection fails. It is why it fails to show anything in Opera,
although Opera would probably work equally well with code the for IE
and for standard DOM.

To code which you could imagine to write if you had some weeks extra time to
write it?

I wouldn't. I would consider using overLib if I needed that
functionality. It's not very good code either (eval-abuse, another
recognized sign of lack of grasp of the language), but it has made the
effort to work in as many browsers as possible and is widely tested.

In a production environment, I would go for stability and being well
tested over being conceptually perfectly pure.

Or compared to some existing code?

Compared to standards for good code. It shows all the signs of code
that was obsolete when it was written (it's not a new thing that there
are more than two browsers, e.g., Opera has existed since 1996).

/L

 

[Thomas 'PointedEars' Lahn]

[Why http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm is not
a "very good javascript" at all?]

It does look bad, based on one of the most traditional signs of bad
Javascript: browser detection.

It doesn't appear to work in my browser (Opera). That's the best argument
against the code (it doesn't work!).
That's a typical result of using browser detection. The code specifically
states:
var nodyn = (!ns5 && !ns4 && !ie4 && !ie5) ? true : false;
I.e., it should only be assumed to work in Netscape 4 or 5
(i.e. Mozilla) and IE 4 or 5.

On a side note, Netscape 5 was never released. Mozilla/5.x were released,
with Netscape 6.0 being one of the many UAs to be based on it, but those
are -- literally -- completely different animals. I seriously doubt the
author of this code had a minimum clue at all. I see this justified again
when following the author link to <URL:http://www.dyn-web.com/> and reading
the junk code there.


PointedEars

 

[RobG]

You assumably mean that the code is not very good? If so, compared to what?
To code which you could imagine to write if you had some weeks extra time to
write it? Or compared to some existing code? If so,where is it?

You can try this:

<URL:http://www.walterzorn.com/tooltip/tooltip_e.htm>


But that is not a recommendation.

 

[VK]

It doesn't appear to work in my browser (Opera). That's the best argument
against the code (it doesn't work!).

It states clearly the tested platforms: FF1+ IE5+ Opr7+, so anyone can
take a dicision if it's enough of coverage or not.

And indeed it works just fine on my Opera 8.5

If for some obscure reasons you also want support for Opera 1.x - Opera
6.x (which is presumably what you have tested on), then you cannot deny
the support for Netscape 4.x neither - btw this script runs just fine
under Netscape 4.5.
It is a good code - it's internal "ugliness" and complexity caused by
Netscape 4.x support. However ever made a working DHTML code for NN 4.x
is entitled for a Medal of Honor, you know Naturally NN4 support is
not needed anymore (as well as say still amateurish Opera 6.x). But
over half of dynamicdrive's codes has been first written during the
Browser Wars and only updated since then. NN4 support doesn't help -
but it doesn't hurt neither, so no problem I guess.

To OP: try to set
tipcss.overflow = 'hidden';
- but it means that the image will be cut if too big.

I would follow the advise of the author: simply pre-set the size to the
biggest image. Or better yet (this is what the real macho do make
all your image of the same size either by resizing them or by setting
the canvas size.

P.S. I'm not the author of this script.

P.P.S. Sorry if I'm sounding grunchy (am I? feel like I am) but I just
hate this a-la former clj stuff of the kind: "I just managed to fail
your script under IE 4.x. (...NN3, Konqueror 1.x, Safari 1.x,
MyFirstBrowser 0.01b ...) yuppy! give me a medal!".

 

[Maxi]

But that is not a recommendation.

Why not a recommendation? looks like a good script.

 

[RobG]

Maxi said on 12/04/2006 3:19 AM AEST:

Why not a recommendation? looks like a good script.

I think you could extract the bits you want and write something a lot
more concise for your specific requirement (i.e. write an ad hoc
function or object).

Library code must be general and therefore is nearly always verbose,
wz_tooltip.js is no exception. It is based on browser detection and
creates a slew of global variables (60 or so), it may not work well with
other scripts as a result. The first job before deploying it widely
would be to encapsulate all that in a single object.

Having said that, it does work quite well though I've only lightly
tested it.