Hotspot on Background Image

I'm trying to create a Hotspot imagemap link in a blank area
of the page that has a background image defined from a CSS header.
Since there is no live page image there, I can't figure out how to
create a hotspot on that page. Is this possible to do?

No
Walt
"mnadell" <[email protected]> wrote in
message
news:g1hgng$iif$[email protected]..
> I'm trying to create a Hotspot imagemap link in a blank
area of the page
> that
> has a background image defined from a CSS header. Since
there is no live
> page
> image there, I can't figure out how to create a hotspot
on that page. Is
> this
> possible to do?
>

Similar Messages

CSS Background Image - Newbie needs help

Good Afternoon,
I'm trying to place a background image in the body of my
page. Pasted below is the code:
Questions:
1. When viewed in the browser, only part of the image can be
viewed, and no vertical scroll bar is available to view the bottom
portion of it. Is there a setting to toggle such that the entire
image can be viewed?
2. As part of the background image, I have text that I want
to use as hotspots for links to other pages in the site. Do I need
to place a table or use some other technique to enable use of
hotspots?
Thanks from a very Green Newbie.
Sid

> 1. When viewed in the browser, only part of the image
can be viewed, and
> no
> vertical scroll bar is available to view the bottom
portion of it. Is
> there a
> setting to toggle such that the entire image can be
viewed?
Background images will never force scrollbars.
> 2. As part of the background image, I have text that I
want to use as
> hotspots for links to other pages in the site. Do I need
to place a table
> or
> use some other technique to enable use of hotspots?
Yes. You cannot put hotspots on background images. Be aware
that this is
the worst (well, publishing a page made in Microsoft
Word/Publisher is the
worst) way to make a web page.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Sid Childers" <[email protected]> wrote in
message
news:eksuka$56i$[email protected]..
> Good Afternoon,
>
> I'm trying to place a background image in the body of my
page. Pasted
> below
> is the code:
>
> Questions:
> 1. When viewed in the browser, only part of the image
can be viewed, and
> no
> vertical scroll bar is available to view the bottom
portion of it. Is
> there a
> setting to toggle such that the entire image can be
viewed?
> 2. As part of the background image, I have text that I
want to use as
> hotspots for links to other pages in the site. Do I need
to place a table
> or
> use some other technique to enable use of hotspots?
>
> Thanks from a very Green Newbie.
> Sid
>
> <style type="text/css">
> 
> </style>
>

Background Image & hotspot/links

How can I make a hotspot of a table cell which has a
background image?
I have a table with 9 cells, all of which have different
background images and text inside them.
I had to make the images background in order to make the text
so the page improves on search engine rankings, so i can't insert
images and attach links to them.
Just linking the text is no good either.
Hope you can help.
thanks

Hello,
You can link the text and expand the link area to fill the
table cell.
Try the code below.
Does that work?
<style type="text/css">

</style>
<table width="600" border="0" cellspacing="2"
cellpadding="0">
<tr>
<td class="celllink"><a
href="something.htm">Test</a></td>
<td class="celllink"><a
href="something.htm">Test again</a></td>
<td class="celllink"><a
href="something.htm">Test once more</a></td>
</tr>
</table>
Something to be aware of:
Users with a different text size setting in their browser
will result in the
text being in a different spot over the image and possibly
even beyond it.
Take care,
Tim
"little bob" <[email protected]> wrote in
message
news:gqovag$b97$[email protected]..
> Thanks,
>
> yes, that does make sense, but wont the transparent
image push down the
> text in the cell?
>
>

Link on background image

I created and inserted a background image in the Container. It includes "link buttons" built into the image in Photoshop, meaning images intended to be clicked in order to move to another page. I can't create hotspots/image maps to use to create links because the image is a background image.
How do I create the actual hyperlinks to make the "buttons" function as navigiation links?
Thanks for your suggestions.
Barry

Google is your friend.
Search term
"Links on background images"
First link in search result
http://xavisys.com/css-trick-turning-a-background-image-into-a-clickable-link/
#yourdiv {
    background-image:url(image.png);
    display:block;
    height:58px;
    text-indent:-9999px;
    width:200px;
You will need to style the position of the div(s)
Learn CSS
Shane

Scroll background image???

My background image (945 px wide) is larger than my Flash
window (620 px wide). When a user moves the cursor left or right, I
want the background image to move in that direction but only as far
as the edge of the image and when the cursor stops moving so should
the image. I will also have hot spots in various places that will
be clickable. I tried this code (see below), but it doesn't quite
do what I need. For one thing it continues to scroll beyond the
left and right edge of the background image. Another problem is
that the image keeps moving even though the cursor stopped, which
make it near impossible to click on my hotspots.

Hey,
I have thought of using this for the exact reason. I haven't
got around to using the hotspots but check out this tutorial. I
think this what you mean.
http://www.kirupa.com/developer/flash8/interactive_image_pan.htm

How to specify relative path for background image in xsl

Hi,
I am generating a PDF from Apcahe FOP. I have an xsl for that, in the xsl fo:block I am displaying a background image. When the image path is absolute like..C:\image\logo.png it works fine. But I want to have the image in my WebContent\images folder and my xsl file is in WebContent\xsls folder. So when I try giving the relative path as ../images/logo.png, the image is not displayed.
Can anyone tell how to do this???
Thanks,
Sanjeev.

I have a fo:block like this :
<fo:block border-style="solid" border-width="0.2pt" text-align="left"
                         background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
                         font-size="8pt" font-weight="bold" color="white" padding-top="1pt"
                         padding-bottom="1pt">
                         <xsl:value-of select="tr/td/span" />
                    </fo:block>In the above code you can see that the the background-image="url('http://localhost:8080/Project/images/table_header_center.png')"
has been given as absolute. The images folder is in my WebContent directory. I want this path to be relative to the context of my application , something like background-image="url('../images/table_header_center.png')".
Thanks.
sanjeev.

In linux, saving a background image (set as Desktop)feature doesnt download my image to wallpaper folder..or even to standard "Save download" feature. Can I tell firefox where (what folder) to save my "Set as Desktop" picture?

When I find a suitable picture to use as wallpaper" I often right click and use the menu item "Set as Desktop Background". The file ""example.jpg" is saved in directory\folder "/home/user" rather than for example "/home/user/my wallpaper" or in the directory
"/home/user/Downloads". The latter as being set under the "Downloads" section on the "General" tab in the "Preferences" dialog box.
Is there a configuration file where I can change the default location to save my "Set as Desktop Background" images. Or better still can the menu be customized to launch the application that allows me to set my desktop wallpapers?
I am using the "PCLinuxOS" Linux OS but I have encountered this issue in many if not all the Linux distributions I have sampled.

Don't use "Set as Desktop". Use ''' "Save Image As..." ''' instead, and file it with your other "wallpaper" images so the operating system has access to those images.
IIRC, Firefox saves a "desktop image" to the Profile folder, and it will only save one image, at that. Change the image and the previous one is gone.

Washed out background image on Treo Pro

Hi:
When I set my background image on my today screen (check the box in settings, browse to image - use 320x320 resolution) I get a "washed out" version of the image regardless of its original color, tone or intensity. Images from the preinstalled themes are fine - vibrant and clear - but the user set images are very light (almost like a 50 percent transparency in Photoshop for example). I have tried both .jpg format and .png. Backlight settings do not cure this either.
Any ideas?
Thanks.
Post relates to: Treo Pro T850 (Bell)
This question was solved.
View Solution.

Hi Again:
Upon further investigation, I have discovered that the options for setting background and transparency levels is found through the pictures and videos explorer not the file explorer.
As suggested I have set the transparency to 0 and the image (Crab Nebula through the Hubble space telescope) is as bright and vibrant as it should be.
Thanks again for the direction - it's much appreciated.
Post relates to: Treo Pro T850 (Bell)

Anchored graphic as background image?

I am working with text flowing continuously through a master text frame unto multiple pages and I am trying to anchor a full-page background image (with bleed) onto specific pages. Is this possible?
I want the background image to stay with the relevant heading on each page. However, when I use "Object/Anchored Object/Insert" to do this with "custom" as the anchor option I end up with a frame on the same layer as my text. This is okay, but when I place an image in the frame, it covers the text I have entered in the text frame. I can see the dotted line indicating the anchor connection, but not the text it is anchored to. I can't change the order of objects within the layer because the "Arrange" options are greyed out. Changing the text wrap options does not help.

Thanks Bob! Really good to know. I will stop hitting my head against a brick wall!
Adding backgrounds to master pages doesn't really cut it since I still can't have them flow dynamically with the continually evolving text in this project. (I suspect I might be able to flow backgrounds with text in Word, if it came to it, but of course I chose InDesign to give me more control, particularly over the non-text elements of the layout).

Problem with Background image and JFrame

Hi there!
I've the following problem:
I created a JFrame with an integrated JPanel. In this JFrame I display a background image. Therefore I've used my own contentPane:
public class MContentPane extends JComponent{
private Image backgroundImage = null;
public MContentPane() {
super();
* Returns the background image
* @return Background image
public Image getBackgroundImage() {
return backgroundImage;
* Sets the background image
* @param backgroundImage Background image
public void setBackgroundImage(Image backgroundImage) {
this.backgroundImage = backgroundImage;
* Overrides the painting to display a background image
protected void paintComponent(Graphics g) {
if (isOpaque()) {
g.setColor(getBackground());
g.fillRect(0, 0, getWidth(), getHeight());
if (backgroundImage != null) {
g.drawImage(backgroundImage,0,0,this);
super.paintComponent(g);
Now the background image displays correct. But as soon as I click on some combobox that is placed within the integrated JPanel I see fractals of the opened combobox on the background. When I minimize
the Frame they disappear. Sometimes though I get also some fractals when resizing the JFrame.
It seems there is some problem with the redrawing of the background e.g. it doesn't get redrawn as often as it should be!?
Could anyone give me some hint, on how to achieve a clear background after clicking some combobox?
Thx in advance

I still prefer using a border to draw a background image:
import java.awt.*;
import java.awt.image.*;
import javax.swing.border.*;
public class CentredBackgroundBorder implements Border {
    private final BufferedImage image;
    public CentredBackgroundBorder(BufferedImage image) {
        this.image = image;
    public void paintBorder(Component c, Graphics g, int x, int y, int width, int height) {
        int x0 = x + (width-image.getWidth())/2;
        int y0 = y + (height-image.getHeight())/2;
        g. drawImage(image, x0, y0, null);
    public Insets getBorderInsets(Component c) {
        return new Insets(0,0,0,0);
    public boolean isBorderOpaque() {
        return true;
}And here is a demo where I load the background image asynchronously, so that I can launch the GUI before the image is done loading. Warning: you may find the image disturbing...
import java.awt.*;
import java.io.*;
import java.net.URL;
import javax.imageio.*;
import javax.swing.*;
import javax.swing.border.*;
public class BackgroundBorderExample {
    public static void main(String[] args) throws IOException {
        JFrame.setDefaultLookAndFeelDecorated(true);
        JFrame f = new JFrame("BackgroundBorderExample");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JTextArea area = new JTextArea(24,80);
        area.setForeground(Color.WHITE);
        area.setOpaque(false);
        area.read(new FileReader(new File("BackgroundBorderExample.java")), null);
        final JScrollPane sp = new JScrollPane(area);
        sp.setBackground(Color.BLACK);
        sp.getViewport().setOpaque(false);
        f.getContentPane().add(sp);
        f.setSize(600,400);
        f.setLocationRelativeTo(null);
        f.setVisible(true);
        String url = "http://today.java.net/jag/bio/JagHeadshot.jpg";
        final Border bkgrnd = new CentredBackgroundBorder(ImageIO.read(new URL(url)));
        Runnable r = new Runnable() {
            public void run() {
                sp.setViewportBorder(bkgrnd);
                sp.repaint();
        SwingUtilities.invokeLater(r);
}

How to set a background image to fill the entire screen on any device in a spark mobile application

Hi,
I started developing a mobile application with Flex.
I'm trying to set a background image to fill the whole screen. I've been stucked at this point for days now. I tried everything and no solution seems to work for me.
I'm using a TabbedViewNavigatorApplication and i need to set some background images on views.
I need my image to fill the entire screen on any device. i don't need to mantain image aspect ratio, just need it to be fullscreen. This seemed to work when setting a custom skin on the TabbedViewNavigatorApplication, however this blocked all my views for some reason and all components contained in view became invisible.
Can you please tell me how can i achieve this?
Kind regards,
Dan

Basically you need a larger image which can accommodate any device. The trick is to show only what each device can display, so therefore some clipping will occur based on device. Have something centered and towards margins have a gradient or just plane colors that way the stuff in the middle will be visible on every device while nobody will care if you are clipping from the color fill.
C

Background image path changes in Template

I have a template I've created, but whenever I attempt to
create a new page from that template the path to the background
image changes automatically causing it to disappear.
The template displays this path:
body {
background-image: url(../img/bg.gif);
background-repeat: repeat-y;
background-position: center;
background-color: #E8F1FA;
While the page created from the template shows this path:
body {
background-image: url(file:///B|/Web
Development/website/img/bg.gif);
background-repeat: repeat-y;
background-position: center;
background-color: #E8F1FA;
What is causing this? Thanks in advance.

Answered on DW forum.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"logicore" <[email protected]> wrote in
message
news:gecn6f$dag$[email protected]..
>I have a template I've created, but whenever I attempt to
create a new page
> from that template the path to the background image
changes automatically
> causing it to disappear.
>
> The template displays this path:
>
> body {
> background-image: url(../img/bg.gif);
> background-repeat: repeat-y;
> background-position: center;
> background-color: #E8F1FA;
> }
>
> While the page created from the template shows this
path:
>
> body {
> background-image: url(file:///B|/Web
Development/website/img/bg.gif);
> background-repeat: repeat-y;
> background-position: center;
> background-color: #E8F1FA;
> }
>
> What is causing this? Thanks in advance.
>
>
>

Gif loader for background image

I simply want to run an animated gif while my background image loads for a slideshow.
I've searched the web and this forum for hours and can't get the various bits of code tips (ajax, jquery) to work because I'm a totaly idiot when it comes to code...i've tried cutting and pasting in many different configurations but can't get anything to work properly.
Can someone help me out to get this to work?
I have this slideshow:
http://www.piquecollaborative.com/fox.html
and want an animated gif to run during load of each page
gif is this:
http://www.piquecollaborative.com/images/loading.gif
here is my code for the page(s)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="Matthew Fox Residence by PIQUE architecture, Peter Jahnke, Eric Meglasson" />
<meta name="keywords" content="pique llc, architecture, emerging architects, young architects, northwest, peter jahnke, eric meglasson, keith ballantyne, collective studio, collected design" />
<title>PIQUE: Fox House</title>
<style type="text/css">
.projectpage {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #333;
body,td,th {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #333;
    font-size: 12px;
body {
    background-image: url(images/fox-01.jpg);
    background-repeat: no-repeat;
#title {
    position:absolute;
    width:350px;
    height:65px;
    z-index:1;
    left: 10px;
    top: 10px;
#apDiv1 {
    position:absolute;
    width:108px;
    height:161px;
    z-index:2;
    top: 3px;
    left: 8px;
#apDiv2 {
    position:absolute;
    width:237px;
    height:160px;
    z-index:3;
    left: 118px;
    top: 3px;
    text-align: right;
#text {
    position:absolute;
    width:351px;
    height:194px;
    z-index:4;
    left: 10px;
    top: 90px;
    background-image: url(images/fox-01.jpg);
#project-text {
    position:absolute;
    width:355px;
    height:300px;
    z-index:5;
    top: 288px;
    text-align: justify;
    left: 13px;
#right-arrow {
    position:absolute;
    width:90px;
    height:330px;
    z-index:6;
    left: 915px;
    top: 270px;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body class="projectpage" onload="MM_preloadImages('images/arrow-rt-inv.png')">
<div id="title"><img src="images/fox-title.gif" width="350" height="65" /></div>
<div class="projectpage" id="text">
<div id="apDiv2">Fox House<br />
    central Oregon<br />
    single family residence<br />
    4175 sqft<br />
    2010<br />
    Timberline construction, Elemental engineering </div>
<div id="apDiv1">name:<br />
    location:<br />
    type:<br />
    size:<br />
    year:<br />
    collaborators: </div>
<img src="images/line-dot-small.png" width="361" height="5" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img src="images/line-dot-small.png" width="361" height="5" /> </div>
<div id="project-text">
<p> This home sits on a bluff overlooking rolling sagebrush meadows   in Oregon’s High Desert with views of the Cascade Mountains dominating    the western horizon. The owners, Matthew and Margherita Fox requested   an extremely durable and energy efficient home for their family. The   request for a net zero house necessitated extensive use of photovoltaic   panels, ground source heat-pumps, careful consideration of day   lighting and shading strategies, and a super-insulated structure. </p>
<p>Italian architect and childhood friend Maria Chiara Trevisan   created the original vision for the structure as a gift to the Foxes.    The three masses, originally conceived as parallelepipedo (rectangular   cubes) resting at various angles in the earth, evolved into three   shelled structures clad in stone, a loose reference to the Three   Sisters mountains which dominate the home’s view.</p>
<p>Photos by Nicole Werner, Bob Woodward, Peter Jahnke</p>
</div>
<div id="right-arrow"><a href="fox02.html"><img src="images/arrow-rt.png" alt="" name="Image1" width="48" height="48" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/arrow-rt-inv.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</body>
</html>
can anyone help me get a leg up on this? Sorry to be such a noob. This is not my trade and i have more respect for you all now than ever before! sorry again,

You might want to reconsider the use of absolutely positioned div's for layout purposes...
it often leads to big difficulties.http://www.apptools.com/examples/pagelayout101.php
Regarding your loading gif, try defining a container for the picture
and position your loading gif as a centered non-repeating background for container
and insert your image in the container.

Animated gif layered above background image

I have a static background image which is displayed in a JPanel. I need to display animated gifs at certain positions on the base image. For every new frame of the animation, the paint method is called whcih attempts to load the entire base image + all the new animated images which is extremely slow!. It also means the animated gif keeps on getting loaded, and seldom gets beyond the first frame.
Im sure many people have had to do something like this. Is the solution to draw the gifs on the glasspane (or use layered panes), and to have a seperate paint method? or is their a simple approach like setting a special clip area.

thanks for the help...
The size of the background image is approx 400*400 pixels (gif or jpg), and the icons are 25*25, and have between 1 and 6 frames.
Here comes the code... I havent finished with the mediatracker stuff, but youll get the idea Im sure.
public void paint(Graphics g) {
    MediaTracker tracker = new MediaTracker(this);
    tracker.addImage(image,0);
    try {tracker.waitForID(0);}
    catch (InterruptedException e){}
    g.drawImage(image, 0, 0, this); //draw background image (approx 400*400 pixels)
    int ICON_ID = -1;
    Image img;
    //draw all the icons...
    //all icons have between 1 and 6 frames. 25*25 pixels.
    for (int i = 0; i < icon_IDs.size(); i++) {
      try {
        ICON_ID = new Integer(icon_IDs.elementAt(i).toString()).intValue();
        Point p = dm.getIconPosition(ICON_ID);
        if (isAlarm(ICON_ID)) {        //ITS AN ALARM - use animated gif
          img = getAlarmImage(ICON_ID);
        else                          //NORMAL ICON - no animation
          img = DataDefinition.getImageIcon(dm.getIconType(ICON_ID)).getImage();
        tracker.addImage(img,0);
        try {tracker.waitForID(0);}
        catch (InterruptedException e){}
        int width = DataDefinition.getSize(dm.getIconType(ICON_ID)).width;
        int height = DataDefinition.getSize(dm.getIconType(ICON_ID)).height;
        g.setClip(p.x, p.y, p.x+width, p.y+height);
        g.drawImage(img, p.x, p.y, p.x+width, p.y+height, 0,0,img.getWidth(this),img.getHeight(this),this);
      catch (SQLException sqle) {
        System.out.println("Could not find position of icon : " + ICON_ID);
}

Animated GIF as a background image on a C5-00?

Is there any way to get animated GIFs runnig as a background image on a C5-00? At the moment, it just shows a still picture....

Yes, Captivate 7. I'm re-working an old Dreamweaver HTML CBT program to bring it up to today's standards using Captivate. I previously had small cartoon hands pointing to the right or left to click to go to the next or previous slide.The pointing hands are static, but on rollover I had an animated gif of the pointing hand moving in the direction it pointed. I'm certain I can figure out a workaround, just wanted to see if there was a built-in way to have an animation be the 'over' state.

Hotspot on Background Image

Similar Messages

Maybe you are looking for