473,785 Members | 2,916 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 6258
> 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*********@we b.de> kirjoitti viestissä
news:18******** ********@Pointe dEars.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*********@we b.de> kirjoitti viestissä
news:18******** ********@Pointe dEars.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/rasterTriangleD OM.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.c om/FAQ>
Apr 12 '06 #10

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

Similar topics

5
1801
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 cursor over the image. If I replace the object creation code with a plain document.write, it works. : // this works as expected document.write("<img src='marker12.gif' \ id='1' \
8
78171
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 below will work for the border no problem, but I can't seem to get the SRC to work - is this not an option in CSS?
2
6774
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 mouseOver instead of the popup I coded. The section of code below works perfectly in Firefox but not at all in IE (why am I not surprised?). The page is nearly 100% dynamic, so this is extracted from the source of a test page. The code in...
4
3010
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 code segments that accomplish display of an image and automatic 'display' (playback) of a .wav file, and apparently are usable for both IE and NS, " <object height="100%" width="100%"
3
2992
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
4026
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: url(/jsp/images/pms/housekeeping/helpBtn_off.gif) no-repeat; } div.helpBtnOn{ font:bold 73% verdana; color:#BB59DE; text-align:left; width:79px; height:24px; margin:0px; padding: 5px 0px 0px 27px; background: url(/jsp/images/pms/housekeeping/helpBtn_on.gif) no-repeat; cursor:pointer; }...
4
3201
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 that when you mouseover it, it displays the corisponding div and separate image. When you mouse out it goes back to the defult. first link. I hope you get the idea. Please help as i will never mange this on my own Many thanks
8
1906
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 all it does it display the full URL of the php file and IE displays a lil blank image box. I'm not sure what version the old server had, but mine has php 5.2.1. I copied over the whole folder, it's not like I'm missing a file there, but I'm wondering...
5
4657
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. Within the area, i would like to display an image and some text, overriding a few words with an inline style. i would like the image to change once the mouse is placed over it. and when the mouse is removed from the image the image should...
0
1723
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 in web app directory. The VB code behind I started with is: Protected Sub Gridview1_RowDataBound If (e.Row.RowType = DataControlRowType.DataRow) Then Dim mytext As String = Server.HtmlDecode(e.Row.Cells(8).Text)...
0
9645
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9480
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
10093
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8976
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7500
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6740
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5381
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5511
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3654
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.