• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Display a Pointer Box When Page Opens

 
Steve Dyke
Ranch Hand
Posts: 1619
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I do not really know what to call what I want so hoplfully this explanation will do.

When a web page opens I would like a comment in the form of a box with a pointer(maybe a bubble) pointing to a particular control on the page with text inside the box giving instruction. This would be superimposed on the web page.

I know how to use DIV tags for popups but I want a fancier display than just a rectangle.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64720
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Give the div a background image containing your "bubble" image. Make sure the image is a PNG or GIF with a transparent background.

Here's a figure from my jQuery book showing this technique:

 
Steve Dyke
Ranch Hand
Posts: 1619
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:Give the div a background image containing your "bubble" image. Make sure the image is a PNG or GIF with a transparent background.

Here's a figure from my jQuery book showing this technique:



I did not get the figure you mentioned.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64720
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hmm, it's displaying fine for me. Are you using IE6? (which has poor PNG support)
 
Steve Dyke
Ranch Hand
Posts: 1619
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:Hmm, it's displaying fine for me. Are you using IE6? (which has poor PNG support)


No, I am using IE7.

I put the background-image attribute in my CSS DIV definition. The image displays when I view the page in design mode but in preview mode the div displays as a colored rectangle.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64720
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
"Preview mode"? In what? And all that matters is what it looks like when it's deployed.
 
Steve Dyke
Ranch Hand
Posts: 1619
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:"Preview mode"? In what? And all that matters is what it looks like when it's deployed.


I use Websphere as my development IDE. When working on a JSP file I have three options, Design Mode, Source, and Preview.

Anyway, you are right, when I run it on the browser it woks.

Thanks.
 
Gregg Bolinger
GenRocket Founder
Ranch Hand
Posts: 15302
6
Chrome IntelliJ IDE Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
If you're using jquery, Beauty Tips is an excellent plugin so such things.
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic