Some nagging CSS image rollover questions

Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
I guess I need a good pointing to a image rollover tutorial for Horizontal inline navigation.
Many Thanks for any help. It just seems like I play a guessing game on the pixel details when I'm trying to construct these types of mavigation.
Thanks, Frank B.

brightbelt wrote:
Hi,
I'm using DW CS4 here. I finally got a Top Horizontal Inline CSS navigation to work with CSS image rollovers. Here's the site:
http://www.brightbeltmusic.com
And here are my questions:
-Why, when my original images are 90 px wide x 30 h, do I have to cut the width in the code to 84 px to make things line up?
Probaby because you are not taking into account padding, borders and margins which add to the width of the container/s
brightbelt wrote:
-I can't seem to set the images by obvious pixel widths - any little thing throws the whole navigation onto the next line and so I have to set the 'Up' image as a repeating background, while shortening the actual image link itself. Is this right? It seems to "work" here but maybe barely.
Mathematicis is critical to the set up. As stated padding and borders, margins etc add to the overall width of a container. So if the containers are too wide to fit in a specific width they will be thrown to the next available space, usually to the next line.
Example: a container which is set at a specific width of 90px and has padding left and right of say 8px is really 106px wide. Therfore if you're trying to allocate space for 6 buttons where each is 90px wide and has 8px padding left/right you need to allocate a space 6 x 106px plus any borders.
brightbelt wrote:
-Padding seems to always be set in 'ems' - so how many pixels are in an 'EM' ? This is so I can figure out the width issues I always seem to have when I want horizontal rollover images...
Personally I would never recommend setting padding in ems. Certainly ems and px don't mix and match very well.
brightbelt wrote:
-Margin for a # ul apparently effects the very end/outside of the list....Is there such a thing as margins for the individual # li ?
li's do have default padding and margins set so these need to be zeroed out.
li {
margin: 0;
padding: 0;
As an experiment copy all the code below, open a new Dreamweaver document and paste it into code view, save it to your site folder with the name navigationTest.html. Run it through a browers and see what the results are like.
<!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="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#navcontainer {
width: 775px;
margin: 0 auto;
background-image: url(navUp.gif);
background-repeat: repeat-y;
overflow: hidden;
#navcontainer ul {
width: 547px;
padding: 0;
margin: 0 auto;
background-image: url(navUp.gif);
#navcontainer ul li {
width: 90px;
float: left;
margin: 0;
padding: 0;
list-style: none;
#navcontainer ul li a {
background-image: url(navUp.gif);
background-repeat:no-repeat;
color: #fff;
text-decoration: none;
font-weight:bold;
width: 90px;
display: block;
text-align: center;
float: left;
border-right: 1px solid #069;
padding: 5px 0;
font-family: arial, helvetica, sans-serif;
font-size: 14px;
</style>
</head>
<body>
<div id="navcontainer">
    <ul>
    <li><a href="index.htm" style="border-left: 1px solid #069;">Home</a></li>
    <li><a href="Contact_Us.htm">Contact</a></li>
    <li><a href="Profiles.htm">Profiles</a></li>
    <li><a href="Catalogue.htm">Songs</a></li>
     <li><a href="BBL.htm">BBL Label</a></li>
    <li><a href="Jazz_links.htm">Links</a></li>
    </ul>
</div>
</body>
</html>

Similar Messages

IE 8 problem with CSS image rollover

The tabbed navigation on the top right of this page is created using CSS. It is working perfectly on my system: PC with Firefox 3, IE6 and IE7.    With IE8, the tab navigation does not work at all.
Any suggestions?
http://www.eagleornamentalironworks.com/test.htm
HTML:
<div id="nav">
    <div id="nav-contact"><a id="contact-tab" href="http://www.eagleornamentalironworks.com/contact.htm" title="Contact"><span>Contact</span></a></div>
    <div id="nav-gallery"><a id="gallery-tab" href="http://www.eagleornamentalironworks.com/gallery/gallery.htm" title="Gallery"><span>Gallery</span></a></div>
    <div id="nav-home"><a id="home-tab" href="http://www.eagleornamentalironworks.com/" title="Home"><span>Home</span></a></div>
</div>
CSS:
#home-tab
    display: block;
    width: 108px;
    height: 28px;
    background: url(images/EagleOrnamental_nav-home.jpg) no-repeat 0 0;
#home-tab:hover
background-position: 0 -28px;
#home-tab span
display: none;
#gallery-tab
    display: block;
    width: 109px;
    height: 28px;
    background: url(images/EagleOrnamental_nav-gallery.jpg) no-repeat 0 0;
#gallery-tab:hover
background-position: 0 -28px;
#gallery-tab span
display: none;
#contact-tab
    display: block;
    width: 109px;
    height: 28px;
    background: url(images/EagleOrnamental_nav-contact.jpg) no-repeat 0 0;
#contact-tab:hover
background-position: 0 -28px;
#contact-tab span
display: none;

Look here -
http://www.murraytestsite.com/eagle.html
Notice that I have removed the display:none from the CONTACT tab's code. Notice also that this is the only one of the three tabs where that rollover now works. I love the sprite rollovers, but I just think you have done them using the wrong approach. Go here and read how Thierry does it -
http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

Multiple CSS image rollovers on a page

Hi there,
So, I have miraculously managed to create my first ever CSS image rollover navigation button on my webpage. This page is an online art gallery so there will be several small image rollover buttons linking to different pages of art.
My question is now that I've created one CSS rollover, do I have to create a brand new one for each additional button or is there a way to change the image and name of the existing button?
Here is my CSS and HTML for the existing image rollover:
/** Declaration for the a.singleRollover selector **/
a.singleRollover {
    display: block;
    width: 90px;
    height: 90px;
    overflow: hidden;
    text-indent: 0px;
    font-size: 0px;
    line-height: 0px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
/** Declaration for the additional states of the a.singleRollover selector **/
a:hover.singleRollover {
    background-position: 0 -90px;
    background-image: url(../Images/CSS%20Rollover/ButtonTOBI.jpg);
<div id="smallBox01a"><a class="singleRollover" title="Tobi rollover" href="Images/CSS Rollover/ButtonTOBI.jpg"></a></div>
The problem is that the background image is already set as ButtonTOBI. Is there a way to specify the image in the HTML each time individually rather than in the main a.singleRollover item? It seems very repetitive to have to go in and create lots of individual CSS rollover buttons.
Thanks in advance for any help.

Go here -
http://www.alistapart.com/articles/sprites
http://www.tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.a sp
Read about how to use a single image for all of your menu 'rollovers'. It works great!

CSS Rollover question

Hi,
I've created a menu using CSS that mkaes a nice rollover.
The thing is - I can't figure ot how to close the gap. I want each
button to but up to it's neighbor:
http://www.daveblaker.com/rapidtest
I'm thinking it's got something to do with the DIV property,
but for the life of me, I can't seem to fix it. I also tried some
other CSS using the UL tag with the same frutrating result. Any
help would be appreciated.
Here's the CSS (below it is the html):
#topNav {
font-family:arial,sans-serif;
font-weight:normal;
font-size:9px;
background:#FFFFFF;
margin: 0px;
padding: 0px;
.topNavLink a {
color:#fff;
text-decoration:none;
font-size:9px;
line-height: 19px;
display:block;
background:url(../images/nav.jpg);
height: 17px;
width: 133px;
text-align: center;
.topNavLink a:hover {
color:#3d140c;
text-decoration:none;
background:url(../images/navON.jpg);
line-height: 19px;
<table width="750" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td bgcolor="#BCBCBC"
class="header_left"> </td>
<td width="650" class="header"> </td>
</tr>
<tr>
<td><table border="0" cellpadding="0"
cellspacing="0">
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
<tr>
<td class="topNavLink"><a href="../home.htm"
target="_top">HOME</a></td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>

The gap is caused by the margin-bottom: 6px; on your a:link
css.
a:link {
color: #2c3379;
text-decoration: none;
MARGIN-BOTTOM: 6px;
DaveB444 wrote:
> Hi,
> I've created a menu using CSS that mkaes a nice
rollover. The thing is - I
> can't figure ot how to close the gap. I want each button
to but up to it's
> neighbor:
http://www.daveblaker.com/rapidtest
>
> I'm thinking it's got something to do with the DIV
property, but for the life
> of me, I can't seem to fix it. I also tried some other
CSS using the UL tag
> with the same frutrating result. Any help would be
appreciated.
>
> Here's the CSS (below it is the html):
>
> #topNav {
> font-family:arial,sans-serif;
> font-weight:normal;
> font-size:9px;
> background:#FFFFFF;
> margin: 0px;
> padding: 0px;
> }
>
>
> .topNavLink a {
> color:#fff;
> text-decoration:none;
> font-size:9px;
> line-height: 19px;
> display:block;
> background:url(../images/nav.jpg);
> height: 17px;
> width: 133px;
> text-align: center;
>
> }
> .topNavLink a:hover {
> color:#3d140c;
> text-decoration:none;
> background:url(../images/navON.jpg);
> line-height: 19px;
>
>
>
>
> <table width="750" border="0" cellspacing="0"
cellpadding="0">
> <tr>
> <td bgcolor="#BCBCBC"
class="header_left"> </td>
> <td width="650"
class="header"> </td>
> </tr>
> <tr>
> <td><table border="0" cellpadding="0"
cellspacing="0">
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> <tr>
> <td class="topNavLink"><a href="../home.htm"
> target="_top">HOME</a></td>
> </tr>
> </table></td>
> <td> </td>
> </tr>
> <tr>
> <td> </td>
> <td> </td>
> </tr>
> </table>
>

CSS swap image rollover

Hi all
Can any one point me please to a simple example of an image
rollover using CSS.
You know the ones.. one image as background and another on
top it as your mouse rolls over it
Thanks in advance

Hi,
Take a look at Thierry's example,
http://www.tjkdesign.com/lab/simple-css_rollover.asp
Does this work for you?
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Back for 2007, close-up magic:
http://deceptivemagic.com
Web dev articles, photography, and more:
http://sourtea.com
=============================================
Proud GAWDS member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"carlosalt" <[email protected]> wrote in
message
news:eu8qt7$46j$[email protected]..
> Hi all
> Can any one point me please to a simple example of an
image rollover using
> CSS.
> You know the ones.. one image as background and another
on top it as your
> mouse rolls over it
> Thanks in advance
>
>

HTML Email Rollover question

Hi Guys
I am looking at adding an image rollover to some links on my HTML email, i have read alot on using css but am sure its not supported unless it's inline. my coding knowlege limited so i may not be fully understanding the expliantions given.
basically is there anyway to add an image rollover without using css?
Thanks guys n girls
Dean

With the exception of GMail, style rules are permitted in the head element, see.
Hover effects are not supported in Outlook 2007/2010, Gmail, iOS or Android. You may still want to include the a:hover style for all supporting clients: Outlook 2000/2003, Hotmail, Apple Mail, and Yahoo! mail ...see

Tooltip rollover question

I'm trying to use tooltip to rollover an image and then have a text box of the same size appear upon rollover. When a user rolls off, the image reappears. Basically something akin to this:
http://dogsbollocks5.com/#solutions
I almost got there by trial and error but hoping someone can provide a tutorial or instructions.
Thanks,
Lyle

Hi Pziecina,
Thanks for the tutorials..great help.for some reason i cant seem to get this to work.any ideas.thanks again.
HTML Code:
<body>
<ol id="rollover">
<li><a href="#"><img border = "0" src="Images/Sent Message.jpg" width="77" height="71" alt="Sent" longdesc="Images/Sent Message.jpg" /><span>The Sent Message <strong>(M)</strong> is, the message that is being sent from one Source to another (A to B). The message has to go through a number of processes before the reciever can access it.</span></a></li>
</ol>
</body>
CSS Code:
#rollover li a {
text-decoration:none;
#rollover li a span {
visibility:visible;
display:block;
position:absolute;
left:233px;
top:120px;
color:#D31988;
background-color:#F4EEFE;
border: 2px solid silver;
padding: 5px;
#rollover li a:hover span, #rollover li a:active span, #rollover li a:focus span {
visibility:visible;
#rollover li a:hover, #rollover li a:focus{
text-decoration: none;
color:#D31988;
visibility:visible; }

JavaScript Image Rollover with html:image ?

I've got a website I'm developing in which I have a submit button as well as a button which pops up a google map within my web page. I've currently got the buttons working and doing what they are supposed to do, but I'm having trouble with a rollover image effect.
The method I'm currently using looks something like...
For my page with the submit button:
<html:image src="images/spacer.gif" styleId="sButton">
</html:image>
For my page with the button that pops up a google map:
<html:image src="images/spacer.gif" styleId="mButton" onclick="javascript:blahblahblah">
</html:image>That's what I'm using to display the buttons on both pages and the functionality works. Next up is the basic CSS I'm using for the image rollover effect...
For the submit button...
#sButton {
display:block;
width:100px;
height:100px;
background-image:url(submitImage.jpg);
background-repeat:no-repeat;
#sButton:hover, #sButton:active {
background-image:url(submitImageHover.jpg);
background-repeat:no-repeat;
For the map button...
#mButton {
display:block;
width:100px;
height:100px;
background-image:url(mapImage.jpg);
background-repeat:no-repeat;
#mButton:hover, #mButton:active {
background-image:url(mapImageHover.jpg);
background-repeat:no-repeat;
}And that's basically it. So as you can see, I'm using the <html:image> to give myself a submit button type thing which works perfectly in both cases. To try and make it have a rollover image effect I'm setting a styleId and then in my CSS declaring a default image and then a hover/active image. Back in the <html:image> tag, for the required src attribute, I've just got a spacer.gif which is a 1 x 1 image that is 100% transparent.
The effect, at least in the Gecko based browsers I've tried, such as Firefox, is that you don't see the spacer.gif even though it is there, and all you see are the CSS background images which changes on hover. This even works in IE7.
My problem... Internet Explorer browsers prior to 7 aren't doing the image rollover. The buttons still work, but I can't get the image to change just using the CSS... Any tips on a way to still use this method or to still use <html:image> but to use some sort of javascript solution?

Thanks for all the quick help on this one... I got it to work just like I was hoping.
bodhi-firestarr... You got me thinking and so I went and tried to search for a way to use that particular javascript method with the <html:image> tag. This brought me to the solution that I could use styleId just like an id and then getElementById in the javascript.
Unfortunately, this only partially solved my problem... It made the submit button work through both CSS and JavaScript, but my map it button still wasn't working. My map button is inside of a loop generating a button for a set of results. If I used the getElementById method it would use the same id for each one causing problems. When I tried to add some sort of index to the end of the Id to fix this, it messed up my CSS, but that's when...
gmachamer, you came up with just the solution I needed. I had no idea property actually translated to name. Once I knew this I was able to use property and got everything to work.
Thanks again everyone!

Why is my image rollover not working in Firefox?

I am starting a new site. In the middle of the page on the right, I have a simple image rollover effect for the UPCOMING EVENTS button. It is also supposed to link to another page (not designed yet). It works in Explorer, not in Firefox. How can I fix this? I suppose I can revert to javascript but it adds a lot of coding to the page. I don't know what to do.    http://jeannettedutton.com/MLVC/

In Menu.css, change this -
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%; /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:0;
    overflow:visible;
to this -
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
    top: 100%; /* 100% is at the bottom of parent menuItemContainer */
    left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
                    and your personal taste.
                    0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
                    on MenuItemContainer and MenuItem on the parent
                    menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
                    the dropdown with the left of the menu item label.*/
    z-index:999;
    overflow:visible;

Help with CSS image Gallery

Found this simple css image gallery. However I'm having trouble adjusting it do my needs. I ideally want to make each small image slightly bigger than currently and have 3 or 4 on each line. Also want to make the enlarged image bigger. The width would need to be around 550px.
<style type="text/css">
* This notice MUST stay intact for legal use.
* This script was created for FREE CSS Menus.
* Visit: www.freecssmenus.co.uk for more CSS.
* Also visit our Free online menu creator.
/* credits: www.freecssmenus.co.uk */
#pg { width:390px;
height:200px;
border:2px dotted #666;
padding:5px;
padding-top:15px;
#pg ul { list-style:none;
padding:0;
margin:0;
width:180px;
position:relative;
float:left;
#pg ul li { display:inline;
width:52px;
height:52px;
float:left;
margin:0 0 8px 8px;
#pg ul li a { display:block;
width:50px;
height:50px;
text-decoration:none;
border:1px solid #000;
#pg ul li a img { display:block;
width:50px;
height:50px;
border:0;
#pg ul li a:hover { white-space:normal;
border-color:#336600;
background-color:#AABB33;
#pg ul li a:hover img { position:absolute;
left:190px;
top:0;
width:auto;
height:110px;
border:1px solid #000;
#pg ul li a span {display:none}
#pg ul li a:hover span { display:block;
position:absolute;
left:5px;
top:130px;
width:350px;
height:auto;
font-size:12px;
color:#999999;
</style>
html
<div id="pg">
<ul>
<li>
<a href="css_rollover_uk_map.php">
<img src="upimage/ukmap345.jpg" alt="Css Rollover Map" />
<span>
<strong>
CSS Map.</strong>
CSS Image swap on rollover/hover. This simple display of CSS shows the versatility of Cascading Style Sheets. Remember this animation is 100% User Accessible.</span>
</a>
</li>
<li>
<a href="big_css_button.php">
<img src="upimage/bigbutton1390.jpg" alt="Large Css Button" />
<span>
<strong>
CSS Big Button.</strong>
Css buttons can be as large and as extravagant as you like. Using one image you can create simple css buttons like this. This button is still a hyperlink not just an image.</span>
</a>
</li>
<li>
<a href="menu_opacity.php">
<img src="upimage/003opacity639.jpg" alt="Css Opacity" />
<span>
<strong>
CSS Opacity Menu.</strong>
you can use styles to change the opacity of an image. This creates interesting effects when creating a menu. </span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/freemusic885.jpg" alt="Free Mp3 Downloads: Unborn Records" />
<span>
<strong>
Unborn Records </strong>
Download free mp3 music for your ipod or mp3 player. Download free music from unsigned artists</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/trix363.jpg" alt="Visit Trix the dog at www.catandtwodogs.co.u" />
<span>
<strong>
Cat And Two Dogs </strong>
Visit my three pets at www.catandtwodogs.co.uk . This is a picture of trix, he's a border collie.</span>
</a>
</li>
<li>
<a href="#">
<img src="upimage/colours238.jpg" alt="A picture of colours in a swirl" />
<span>
<strong>
A swirl of colours. </strong>
This is just a picture of colours in a swirl effect.</span>
</a>
</li>
</ul>
</div>

Sorry can't do this at the moment.
I've decided to switch to the JQuery Lightbox Image Gallery instead. In IE8 I get the following message:
Message: Script error
Line: 0
Char: 0
Code: 0
URI: file:///C:/Documents%20and%20Settings/User/My%20Documents/SRC12-13/all%20html%205/all%20ht ml%205/Simple-HTML-5-Template/Simple%20HTML%205%20Template/js/jquery.lightbox-0.5.min.js
My page works and my js is refenced correctly. Not sure if this is just a IE8 thing, or whether the page needs uploading to work correctly. Works fine in Chrome.
Wonder if there is a way to fix this?

While generating PDF from webpage or website some of the images/texts doesnt show up in PDF. Also, there are a lot of formatting inconsistencies.

Creating, Editing & Exporting PDFs ! ! !

Can anyone please help, the websites hosted with us are developed on adobe CQ5.4 content management tool and when they are exported to PDF some of the images / texts doesn't get generated in the PDF. Also, the css /theme doesn't get generated resulting in formatting inconsistencies.
However, if the same website is generated using some online PDF converters all Images & texts are coming fine with correct formatting.
Is this issue due to using CQ CMS as that has a lot of components or is there a limitation with Acrobat XI pro trial version or anything else ?
Appreciate if some one could provide inputs.
Thanks
Anusha

Unable to install supporting objects(custom CSS/Images) through SQL

4.2.1
Hi there,
we have a Apex app which uses custom CSS/images loaded into shared objects CSS and image folders respectively. I followed the steps
http://nerd.net.au/29-apex-application-express/general-application/122-include-images-with-supporting-objects-on-apex-export-import
Now, this works fine when we manually import the application through application builder, it "prompts" if we want to install supporting objects, when yes is selected, everything gets installed.
MY problem is we have an automated patching process where the .sql application file gets installed but the supporting objects are not. So I tried bundling the supporting object as a separate .sql file but got an error
Testing options PL/SQL procedure successfully completed. declare * ERROR at line 1: ORA-20001: Package variable g_security_group_id must be set. ORA-06512: at "APEX_040200.WWV_FLOW_IMAGE_API", line 11 ORA-06512: at "APEX_040200.WWV_FLOW_IMAGE_API", line 31 ORA-06512: at
The supporting object is a button. Do I need to set the application id or security group id or something else?
begin
wwv_flow_api.g_varchar2_table := wwv_flow_api.empty_varchar2_table;
wwv_flow_api.g_varchar2_table(1) := '89504E470D0A1A0A0000000D494844520000009600000051080600000030EC5FEE000000097048597300000B1300000B1301009A9C1800000A4D6943435050686F746F73686F70204943432070726F66696C65000078DA9D53775893F7163EDFF7650F56';
wwv_flow_api.g_varchar2_table(2) := '42D8F0B1976C81002223AC08C81059A21092006184101240C585880A561415119C4855C482D50A489D88E2A028B867418A885A8B555C38EE1FDCA7B57D7AEFEDEDFBD7FBBCE79CE7FCCE79CF0F8011122691E6A26A003952853C3AD81F8F4F48C4C9BD80';
wwv_flow_api.g_varchar2_table(3) := '021548E0042010E6CBC26705C50000F00379787E74B03FFC01AF6F00020070D52E2412C7E1FF83BA50265700209100E02212E70B01905200C82E54C81400C81800B053B3640A009400006C797C422200AA0D00ECF4493E0500D8A993DC1700D8A21CA908';
wwv_flow_api.g_varchar2_table(4) := '008D0100992847240240BB00605581522C02C0C200A0AC40222E04C0AE018059B632470280BD0500768E58900F4060008099422CCC0020380200431E13CD03204C03A030D2BFE0A95F7085B8480100C0CB95CD974BD23314B895D01A77F2F0E0E221E2C2';
wwv_flow_api.g_varchar2_table(5) := '6CB142611729106609E4229C979B231348E7034CCE0C00001AF9D1C1FE383F90E7E6E4E1E666E76CEFF4C5A2FE6BF06F223E21F1DFFEBC8C020400104ECFEFDA5FE5E5D60370C701B075BF6BA95B00DA560068DFF95D33DB09A05A0AD07AF98B7938FC40';
wwv_flow_api.g_varchar2_table(6) := '1E9EA150C83C1D1C0A0B0BED2562A1BD30E38B3EFF33E16FE08B7EF6FC401EFEDB7AF000719A4099ADC0A383FD71616E76AE528EE7CB0442316EF7E723FEC7857FFD8E29D1E234B15C2C158AF15889B850224DC779B952914421C995E212E97F32F11F96';
wwv_flow_api.g_varchar2_table(7) := 'FD0993770D00AC864FC04EB607B5CB6CC07EEE01028B0E58D27600407EF32D8C1A0B91001067343279F7000093BFF98F402B0100CD97A4E30000BCE8185CA894174CC608000044A0812AB041070CC114ACC00E9CC11DBCC01702610644400C24C03C1042';
wwv_flow_api.g_varchar2_table(8) := '06E4801C0AA11896411954C03AD804B5B0031AA0119AE110B4C131380DE7E0125C81EB70170660189EC218BC86090441C8081361213A8811628ED822CE0817998E04226148349280A420E988145122C5C872A402A9426A915D4823F22D7214398D5C40FA';
wwv_flow_api.g_varchar2_table(147) := 'A514B7B6B6EA5AADA60B8582EAECEC54511471BD5EE7BEBE3EBF4E108FCA58FE9601580A68199FDAF12F8D1DDB5E3386221ADD8E3AF3CEC772A73505D60820C32BF0238E6DAF5D508DBAFFF2CFACE20C3E9A03E2789F3430B68D6DAF641BF33D8D6D63C0';
wwv_flow_api.g_varchar2_table(148) := '1ADBC68035B68D016B6C1BDBC68035B6BD46B6FF3B0074B1DD40306DC6CD0000000049454E44AE426082';
end;
declare
    l_name   varchar2(255);
begin
    l_name := 'logo.png';
wwv_flow_api.create_or_remove_file(
     p_name=> l_name,
     p_varchar2_table=> wwv_flow_api.g_varchar2_table,
     p_mimetype=> 'image/png',
     p_location=> 'WORKSPACE',
     p_nlang=> '0',
     p_mode=> 'CREATE_OR_REPLACE',
     p_type=> 'IMAGE');
end;
/

Thanks Fac586! I did follow the process on those lines and was able to successfully get the images, application installed. The CSS which just had
body {
     background-color:#000000;
}Was also applied. However, it for some reason does not work. Looks like the CSS is not getting loaded. When I delete the CSS and upload it again through the shared components->CSS folder, it works fine. Not sure what the solution is!
Oh and by the way, thanks a ton for helping everyone!
Cheers,
Ryan

How do I edit an Image Rollover?

This is driving me nuts. I've got an Image Rollover and I
just want to edit it. The second state isn't on the Properties
menu. Is there no way to get back to the initial dialogue that asks
you to link the two images?
And I truly don't want to be a troll or sound overly
negative, but me and two friends--both of whom have hosted multiple
websites for years--are completely stumped by a myriad of things in
Dreamweaver CS3. I used two versions back (before MX, I think) just
fine and had no real complaints. But our IT guy, myself, and the
other guy can't get images to show correctly, can't figure out how
to edit the rollover, can't get frames to work right. It's very
frustrating. I've bought the Dummies book, watched the tutorials,
and checked the forums. It's the *basics* that are crazy hard or
just don't work. I'm an Adobe fan, but this is nuts. Am I alone on
this?

Select the trigger image in Design view, and double click the
SwapImage
behavior listed in the behaviors panel.
> But our IT guy,
> myself, and the other guy can't get images to show
correctly, can't figure
> out
> how to edit the rollover, can't get frames to work
right.
This is not a DW problem, though. It's a *you* problem, no?
> Am I alone on this?
Among those who have taken the time to learn HTML and CSS,
yes, I think so.
Anyone using DW primarily in "WYSIWYG" mode will experience
many
frustrations, include ones such as this.
And by the way, why on earth are you using frames? 8)
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
==================
"PEGShane" <[email protected]> wrote in
message
news:g131mb$2p9$[email protected]..
> This is driving me nuts. I've got an Image Rollover and
I just want to
> edit it.
> The second state isn't on the Properties menu. Is there
no way to get back
> to
> the initial dialogue that asks you to link the two
images?
>
> And I truly don't want to be a troll or sound overly
negative, but me and
> two
> friends--both of whom have hosted multiple websites for
years--are
> completely
> stumped by a myriad of things in Dreamweaver CS3. I used
two versions back
> (before MX, I think) just fine and had no real
complaints. But our IT guy,
> myself, and the other guy can't get images to show
correctly, can't figure
> out
> how to edit the rollover, can't get frames to work
right. It's very
> frustrating. I've bought the Dummies book, watched the
tutorials, and
> checked
> the forums. It's the *basics* that are crazy hard or
just don't work. I'm
> an
> Adobe fan, but this is nuts. Am I alone on this?
>

New to dw css images not showing

I made a practice site on one computer with dw using a css temp . my folder has html-images-template-default-index i click on index it all works
i put it on my mem stick put the same folder on another computer with apache in hdocs it works but its not showing the css images everything but
it must be a simple fix it all worked on the computer with dw and thats not opening dw thank you ken

when css images refuse to show up in the browser after a site was copied to a new pc or the server itself it's usually because the path to your image in the css is not valid anymore
Most common causes of these problems are:
- using absolute links to the local file system instead of relative links.. If your path to the image starts with a drive letter/name like Macintosh HD: or C:\ for example, chances are it won't work anywhere else.
- folder name is capitalized like this: "Images" in the css while its "images" on the actual drive - same goes for file names & extensions (Picture.JPG is not always the same as picture.jpg)
- you forgot to copy the folder/image in question to the new drive - or copied it to the wrong place in the "folder tree structure".
- you moved/renamed the image folder or the image file itself without updating your css.
Theres no magic to it, no simple or complicated fix. All there is is to make sure that all paths used in the css exactly match the file structure on the drive and avoid absolute links.
If you could post the contents of your css file here - or give us a link to the server if your page is already online, we could prolly be more specific in our answers.
HTH,
Stephan

How can I use some of the image i am working on to paint with? like if I wanted to give someone an extra eye in the forehead, ow could i then paint their own i in the forehead? I know there is a paint tool for that, i just can't find it ... :/

How can I use some of the image i am working on to paint with? like if I wanted to give someone an extra eye in the forehead, ow could i then paint their own i in the forehead? I know there is a paint tool for that, i just can't find it ... :/

It sounds like you are talking about the cloning tool?
Tool looks like this:
Then when selected you can change the size of the brush and using Alt (windows) and Command (Mac) to select your region you want to copy then start to create you cloned image.
Hope this helps?

Some nagging CSS image rollover questions

Similar Messages

Maybe you are looking for