473,387 Members | 1,575 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Image and Text display on mouseover

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/dynamici...agetooltip.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.

Apr 9 '06 #1
9 6218
> 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/c...d-1-sample.jpg
- I named it as blue.jpg

Apr 9 '06 #2
Maxi wrote:
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/dynamici...agetooltip.htm
Not at all.
I have a question and not sure who to ask.


| Author: Sharon Paine
PointedEars
Apr 9 '06 #3

"Thomas 'PointedEars' Lahn" <Po*********@web.de> kirjoitti viestissä
news:18****************@PointedEars.de...
Maxi wrote:
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/dynamici...agetooltip.htm


Not at all.
I have a question and not sure who to ask.


| 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.
Apr 10 '06 #4
"optimistx" <op*************@poistahotmail.com> writes:
"Thomas 'PointedEars' Lahn" <Po*********@web.de> kirjoitti viestissä
news:18****************@PointedEars.de...
Maxi wrote:
> 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/dynamici...agetooltip.htm
Not at all.

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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Apr 10 '06 #5
Lasse Reichstein Nielsen wrote:
"optimistx" <op*************@poistahotmail.com> writes:
[Why http://www.dynamicdrive.com/dynamici...agetooltip.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
Apr 10 '06 #6
optimistx wrote:

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.

--
Rob
Apr 10 '06 #7
VK

Lasse Reichstein Nielsen wrote:
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!". :-)

Apr 10 '06 #8
> But that is not a recommendation.

Why not a recommendation? looks like a good script.

Apr 11 '06 #9
Maxi said on 12/04/2006 3:19 AM AEST:
But that is not a recommendation.

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.
--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>
Apr 12 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Jim Buzbee | last post by:
I have a subroutine that inserts image objects into a page for me. It works fine except for one thing. My mouseover settings don't appear to take. i.e. I see nothing at all when I move the mouse...
8
by: al | last post by:
Hi, I've been trying to create a image mouseOver effect using CSS - is this possible? Or will I have to use DIV tags or something along those lines? I've tried a number of things - the code...
2
by: Tyrone Slothrop | last post by:
I am coding a site which involves uploading images. All of the PHP and display is OK but the client wants to be able to display the image thumbnail on the upload page and show the full image on...
4
by: murrayatuptowngallery | last post by:
I have looked at some mouseover/ sound object scripts and can't get them to work. Most were more complex than needed and introduced several new parameters for me. I found a simple pair of html...
3
by: Raed Sawalha | last post by:
Dear : I have an image in a aspx page I need when user mouseover it to display HTML Table with links. Regards
2
by: Amy | last post by:
<style> div.helpBtn{ font:bold 73% verdana; color:#995F8D; text-align:left; width:79px; height:24px; margin:0px; padding: 5px 0px 0px 27px; background:...
4
by: alex.kemsley | last post by:
Dear all, I am a very novice javascriper and have cobled this together from various places. I didnt expect it to work but hopefully will give you an idea of what i want to achive. I need 5 links...
8
TheMadMidget
by: TheMadMidget | last post by:
I had no problem with this code on my school's server, but when I moved it to mine it didn't work at all. Before it would make an image and display the text where I wanted it to, but now if Firefox...
5
by: studentofknowledge | last post by:
hi guys im new to javascript and need some guidence please.. im trying to display a 400x400 pixel coloured area in the middle of a webpage that stays in the middle with a browser window resize....
0
by: spacecadet563 | last post by:
I am trying to change and display the image source of an image control (named image2 )on mouseover of cell event on a gridview(Gridview1) with a SQL datasource. The cell contains image name of image...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.