Image source attribute in a CSS ?

I'm trying to change my static HTML page which contains some <img> tags so that the image attributes are stored in a style sheet. However, I can't see any way to put the 'src' attribute in the CSS.
e.g.
<td width="1">
<img src="dropdown.gif">
</td>
I know I can assign a 'class' to the 'img' object but how do I get the "dropdown.gif" in to the CSS so that the clients can change the name of the file more easily ?
Thanks.
Sarah.

If you haven't figured it by now you can try this:
<html>
<head>
     <title>Untitled</title>
     <STYLE TYPE='text/css'>
          a.clsImg { height: 13px; width: 13px; background-image: url(../images/someImage.gif);
                    background-color: #FFFFFF; background-repeat: no-repeat }
     </STYLE>
</head>
<body>
<TABLE>
     <TR>
          <td width="100"><a href="javascript:alert('TEST') class="clsImg"></a></td>
     </TR>
</TABLE>
</body>
</html>

Similar Messages

  • Image control source attribute

    I would like to protect my source files such as images from being downloaded or directly referenced by a URL by somebody other than my program. I thought may be an easy way to do that would be if I set the source to outside my webfolders. But my understanding is that in an Image control, the value of the property source has to be under my web root folder. Is there a way I can set the source to outside of my web folder and still have my flex app render the image od does some one have a different way of achieving the same objective. Thanks, Ramesh

    Hi there
    You can embed your image on the application.
    On FlexBuilder project, add a new source directory with your images... and in your source code some like this:
    <mx:Script>
    <![CDATA[
    [Embed(source="image/yourImage.png")]
    [Bindable]
    public var myImage : Class;
    ]]>
    </mx:Script>
    <mx:Image source="{myImage}"/>
    Regards

  • Use different "fx-border-image-source" for first tab and remaining tabs

    Hi,
    I'm using something like this
    .tab {
    -fx-padding: 0px 5px -2px 5px;
    -fx-background-insets: 0 -20 0 0;
    -fx-background-color: transparent;
    -fx-text-fill: #c4d8de;
    -fx-border-image-source: url("images/tab5.png");
    -fx-border-image-slice: 20 20 20 20 fill;
    -fx-border-image-width: 20 20 20 20;
    -fx-border-image-repeat: stretch;
    -fx-font-size: 22px;
    .tab:selected {
    -fx-border-image-source: url("images/tab-selected5.png");
    -fx-text-fill: #333333;
         -fx-background-color: red;*/
    to customize the tab appearance of a TabPane.
    That worked well. But I need to use a different set of images for just the first tab. Does anyone know a way to accomplish that?
    Thanks.

    How can I "fix up" the first tab of tab panes that are created after I "fixed up" the first tab of the initial tab pane?
    My app allows user to create new tab panes at any moment during program execution.Not easy to answer this one.
    The best answer would be to use structural pseudoclasses, but (as David points out), they are not yet implemented.
    The trick here is how to identify the first tab of each tab pane so that it can be styled separately from the other panes.
    Doing the styling without a dynamic lookup is preferrable to using a dynamic lookup (i.e. when the first tab is created give it a specific style, e.g. tab0).
    This is how the charts work, where they set style classes based on series of data, e.g. series0, series1 - this allows you to independently style each series of data.
    However the chart stuff has all of that built into the implementation, whereas the tabs don't. To achieve that you would likely need to go into the TabSkin code (http://openjdk.java.net/projects/openjfx/) find out where and how it generates the Tab nodes and write a custom tab skin or extension of the existing one which assigns a numeric style class to each new tab in a pane (e.g tab0, tab1, etc). In other words, not particularly easy if you are unfamilar with the tab skin implementation. You could log a javafx jira feature request to have those style classes set on tabs - file it here => http://javafx-jira.kenai.com.
    In the meantime a simple alternative is to use the dynamic lookup method in my previous post and a hack such that whenever you add a new tab pane to the scene you do something like the following:
    new Timeline(
      new KeyFrame(
        Duration.millis(50),
        new EventHandler<ActionEvent>() {
          @Override public void handle(ActionEvent arg0) {
            Node tab = newTabPane.lookup(".tab");
            if (tab != null) tab.getStyleClass().add("first-tab");
    ).play();The reason for the Timeline is that I don't really know at what stage the css layout pass is executed. I know that when you initially show the stage and then do a lookup, the css pass seems to have already been done and the lookup will work. But for something that is dynamically added or modified after the scene is displayed - I have no idea when the css layout pass occurs, other than it's some time in the future and not at the time that you add the tabPane to the scene. So, the Timeline introduces a short delay to (hopefully) give the css layout pass time to execute and allow the lookup to work (not return null). Not the best or most efficient solution, but should work for you.

  • Change image source distorts new image

    Is there any easy way, once I change image source in Edge Animate, to get it to at least be proportionally correct? When I change an image source with a different size, it comes in distorted.

    If you change the source it will fill the boundaries of the original source image automatically. If the size is different, it is probably better to delete the original image and drop the new one.
    If you are talking about loading an image dynamically and changing them dynamically, use css background image with no-repeat and have you div be the size of the largest image used unless you code the image size when they change.

  • Image source

    Hi,
    is it possible to directly show an image that is retrieved physically like the below?
         out.println("</body><img src='http://192.168.125.125:8988/Application1-Project1-context-root/showworkloadimgservlet'></html>");

    Hi,
    Question is not clear anyway i guess you expecting <af:image and put correct URI for source attribute.
    See:
    http://jdevadf.oracle.com/adf-richclient-demo/docs/tagdoc/af_image.html

  • How to show an Default Image in case of Image  src attribute is pointing to  null

    Hi ,
    I am displaying Images on to DataGrid by reading an XML File .
    This works fine if the Image src is prsent.
    Now my question is that sometimes the Image  src might be null , then in which case i need to
    display some default Image .
    <mx:HBox id="hBox">
    <mx:Image source="{rep.currentItem.@src}"/>
    </mx:HBox>
    <images>
    <image src="images/One.png" />
    <image src="images/Two.png"/>
    <image src=""/>
    </images>
    Please tell me as how to show an Default Image in case of Image  src attribute is null .
    Please share your ideas on this .
    Thanks in advance .

    bind the image source to a function
    <mx:Image source="{getImage()}"/>
    then write a function to detect if an image is present
    private function getImage():String
         if  ( rep.currentItem.@src == null)
              return "default.png";
         else
              return rep.currentItem.@src;

  • UIX Templates and images source

    My project structure is this:
    HTML sources
    images (folder)
    templates (folder)
    page.uix
    page.uix uses a template in the templates folder, which uses some of the images in the images folder. In the template, under <corporateBranding> I have an image with the source attribute set to "images/logo.jpg". In <globalButtons> I am databinding to a DataObjectList (albeit <inline>) and my source attributes for the buttons are set to "/images/imageName.gif" (note the leading "/"). I don't understand why these two attributes have to have different settings for the source as they're both getting their images from the same location. When I try the alternative source syntax the images aren't rendered. Anyone help?
    Thanks
    Ian

    The <image> inside <coporateBranding> is not processed any further and is
    converted directly into an HTML <img src=".."> tag.
    However, the source attribute of a <globalButton> indicates an image on the local file system that needs further processing. The image is colorized
    (depending on whether the globalButton is selected/disabled) and a border is
    drawn around it.
    Because of this difference, the relative root of the source of the globalButton is the servlet root, and not the current URL path.
    If the icon you want to use (as your globalButton) is already fully processed and does not need to be colorized (as described above), you may use the "icon" attribute (of globalButton) instead of the "source" attribute. The "icon" attribute is rooted exactly the same as the "source" attribute of an <image> tag.

  • Question about dynamically changing image source

    hi, this might be a stupid question that i've simply never
    seen, but i have a picture on a page that, when the user clicks a
    link below, needs to change to an altered picture. probably very
    simple, i just need code that will change the image source of a
    named image by clicking a link. thanks for any help you can give
    me.

    You can use a remote rollover technique that uses css
    (nesting one or more elements inside an anchor link) and absolute
    positioning, or JavaScript.
    Here is a quick JavaScript to achieve this effect:
    xhtml code
    <head>
    <script src="external.js" language = "javascript" type =
    "text/javascript"></script>
    </head>
    <body>
    <p><a href="new_page.html" id="arrow"> New
    Page</a></p>
    <img src="images/image1_off.gif" width="100" height="20"
    id="arrowImg" alt="arrow" />
    </body>
    external JavaScript file
    window.onLoad = rolloverInit;
    function rolloverInit() {
    for (var i=0; i<document.links.length; i++)
    var linkObj = document.links
    if (linkObj.id) {
    var imgObj = document.getElementById(linkObj.id + "Img");
    if (imgObj) {
    setupRollover(linkObj, imgObj);
    function setupRollover(thisLink, thisImage) [
    this.Link.imgToChange = thisImage;
    this.Link.onmouseout = rollOut;
    this.Link.onmouseover = rollOver;
    thisLink.outImage = new Image();
    this.Link.outImage.src = this.Image.src;
    thisLink.overImage = new Image();
    thisLink.overImage.src = "images/" + thisLink.id +
    "_on.gif";
    function rollOver() {
    this.imgToChange.src = this.overImage.src;
    function rollOut() {
    this.imageToChange.src = this.outImage.src;
    There is a lot going on here but if you know a little
    JavaScript it will be failry easy to work it out. The important
    thing is to note the file layout, naming conventions and image
    constructs. Make sure the ids, etc are matched in the functions and
    html code.
    This technique shows the user what the image will become if
    they click the text when they mouse over the text link. This is
    handy for showing a preview of an image. You can alter the script
    to change the image without a preview if you don't want that
    effect.
    regards
    Nick Barling
    www.barkingweb.com

  • How to set image source path in formsweb.cfg file in forms 11g

    Hi,
    I had written HTML code in the formsweb.cfg file in forms 11g. In the below code i am unable to retrive image file(i.e., .gif, .jpeg) from the server or local machine.
    In the below HTML code i set image source in the image tag as below:
    <img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-new11_04.GIF"
    Is this correct path to fetch the images from the server or local machine .
    Please help me out how to set path for image in html or is there any alternate process to retrive images.
    Here is the code :
    [INDIVIDUALUAT]
    workingDirectory=D:\Aims10dev\Work
    form=LMstartup.fmx
    userid=rmenu/rmenu@RLIFEQA64
    codebase=/forms/java
    imageBase=codebase
    width=1005
    height=750
    WebUtilArchive=/forms/java/frmwebutil.jar,/forms/webutil/jacob.jar
    WebUtilLogging=off
    WebUtilLoggingDetail=normal
    WebUtilErrorMode=Alert
    WebUtilDispatchMonitorInterval=5
    WebUtilTrustInternal=true
    WebUtilMaxTransferSize=16384
    baseHTMLjinitiator=webutiljini.htm
    baseHTMLjpi=webutiljpi.htm
    archive_jini=frmall_jinit.jar,life-icons-round.jar,Agilis_Icon.jar,life_Icon.jar,personalize.jar,hyperlink.jar,amazingbutton.jar
    archive=frmall.jar
    separateFrame=False
    lookandfeel=Generic
    EndUserMonitoringURL=True
    usesdi=yes
    #HTMLbeforeForm= <table width="1005" border="0" cellspacing="0" cellpadding="0"><tr><td width="200"><img src="/forms/html/agilis-life-logo.gif" width="200" height="80" /></td><td width="10"><img src="/forms/html/agilis-life-new11_02.gif" width="36" height="80" /></td><td width="805" valign="top" background="/forms/html/agilis-life-new11_03.gif"></td></tr></td></tr></table>
    HTMLbeforeForm=<body topmargin="0" leftmargin="0" > <table width="1005" height="100" border="0" cellspacing="0" cellpadding="0"><tr><td width="200" valign="bottom" ><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-logo.gif" width="200" height="80" /></td><td width="10" valign="bottom" ><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-new11_02.gif" width="36" height="80" /></td><td width="550" valign="bottom" ><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-new11_03.gif" width="550" height="80" /></td><td valign="bottom"><table width="219" height="90" border="0" cellspacing="0" cellpadding="0"><tr><td height="36" valign="bottom" align="center"><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agile-logo.jpg" height="36"></td></tr><tr><td height="10" valign="bottom"> <div align="right"><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-decoration:none; color:#00000; " >Home | Change Password | Logout</span></div></td></tr><tr><td colspan="3" valign="bottom"><img src="E:\Oracle\Middleware\Oracle_FRHome1\tools\web\html\agilis-life-new11_04.GIF" width="100%" height="39" /></td></tr></table></td></tr></td></tr></table></body>

    AFAIK, this is not the correct way to set the image location.
    We call the working directory as context, so inside the context root along with WEB-INF, maintain a folder with name img and put all the images in that directory.
    You can use either .\<image_folder> or the optimum way would be (if you are using JSPs) to use getContext() method and traverse accordingly.
    FYI,,, using getContext() will give you context root directory, from there it is as simple as accessing any other folder.
    Hope this answers your question.
    Cheers,
    Jeets.

  • Have to toggle "Relative to" button each time I try to change an image source

    Dreamweaver CS4 running on Windows 7. 
    When changing an existing image on an existing web page in Dreamweaver by double-clicking the existing image on the page to open the Select Image Source panel, I have to toggle the "Relative to" (Site Root / Document) button for each image.
    In other words, say that when using Design view, I want to replace img1.jpg with img3.jpg, and IMG2.jpg with img4.jpg,   The steps I have to take are:
    1. Double click img1.jpg on the page to open the Select Image Source panel.
    2. Select img3.jpg. 
    3. Click the Relative to button at the bottom of the panel and change it from whichever it is on (Site Root, let's say) to the other option (Document).
    4, Then click OK.
    5. Double click img2.jpg on the page...
    6. Select img4.jpg
    7 Select the other option (SIte Root) in the Relative to drop down
    8. Then click OK
    9. Repeat for each image whose source is being changed.  If one is relative to Site Root, the next will have to be relative to Document, then the next again I have to select Site Root, etc.
    If I don't select the other relative to option, the image source path will not change when I click OK.
    Default Link Relative To in site definition is set to Document.
    It's been like this for weeks now and it's starting to get annoying.  Any ideas?

    David, I tried deleting the corrupt cache flie, no difference.  Deleted the config folder, same.  Other than I lost the extensions... and had to reinstall them.
    However, John's answer is correct.  And clicking another image before clicking the one I want is faster than the way I was doing it.
    It makes no difference if they are .png .jpg or .gif images.
    By the way, I was wrong about my DW version.  Turns out it's CS3.  Guess it's time to upgrade... one of thes days!
    Thanks everyone!
    Message was edited by: tarfh, to add sentence about png images.

  • Image.source in ItemRenderer works in Windows but not Mac

    I have a Flex (AIR) application that is giving me problems on
    the Mac. In one of the
    Datagrids, I am using an ItemRenderer with an image control.
    Some code in the
    "set data(value:Object)" function assigns a file path as the
    source of the image
    control as follows.
    imgThumb.source =
    File.documentsDirectory.resolvePath("pdqtemp").nativePath +
    "/" + data.strJPGFileName;
    This works correctly in Windows , but not on the Mac.
    In this case, the path resolves to the following on the Mac.
    /Users/brian/Documents/pdqtemp/artist_01t.jpg
    I have verified that the file is in the right place and when
    using the path in
    the command line console, it correctly addresses that
    directory and file. I
    don't normally develop apps for the Mac so I am sure there is
    something I am
    missing.
    Any ideas?
    Thanks for your help.

    Hi Jed,
    Thanks for responding
    That is the exact path assigned to the Source of the Image
    control. However, it isn't exactly a trace of the Image.Source
    property.
    The code in question is attached
    The alert shows the path I originally posted and shows that
    the fileImgThumb.exists returns False.
    As I mentioned, this works perfectly in Windows. There is
    some code elsewhere in the app that creates the thumbnail. That
    does work on the Mac as the thumbnail image is created and saved
    where expected.
    I am not sure what I might be doing wrong.
    Thanks for your help,
    Sid

  • Image source in itemrenderer

    imglist = arraycollection which contains names of images
    which are coming from database
    myimg = array of images
    all images are stored in newfolder
    how to use tilelist itemrenderer for images

    Hi Jed,
    Thanks for responding
    That is the exact path assigned to the Source of the Image
    control. However, it isn't exactly a trace of the Image.Source
    property.
    The code in question is attached
    The alert shows the path I originally posted and shows that
    the fileImgThumb.exists returns False.
    As I mentioned, this works perfectly in Windows. There is
    some code elsewhere in the app that creates the thumbnail. That
    does work on the Mac as the thumbnail image is created and saved
    where expected.
    I am not sure what I might be doing wrong.
    Thanks for your help,
    Sid

  • How to set "Image Map" attribute to "Polygon" via javascript in Illustrator CS5

    Ok, so I have this little script I've written that I want to use to go through a bunch of paths in a document and give each path a url for use in an image map. I want each link to be a Polygon because, well, let's face it, "Rectangle" is useless 99% of the time. Obviously, the way you would do this manually would be to open the Attributes panel and set the Image Map attribute to Polygon and type a URL in the URL field. Fine. Easy enough. However, when scripting the process, it seems one can only set the URL (or the uRL [sic] as documented in the javascript reference) of the PathItem. In other words:
    pathItem.uRL = "http://someurlfor.me";
    Unfortunately, this defaults the "Image Map" attribute to "Rectangle" (which we already know is useless 99% of the time.) SO, anyone out there know how to change that attribute to "Polygon?"
    Btw, I'm on Illustrator CS5 and have been using this reference:
    http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/pdf/illustrator/scrip ting/illustrator_scripting_reference_javascript_cs5.pdf
    Thanks,
    -Matt

    We found that with the following setting, the problem is almost solved :
    theme.setQueryWindowMultiplier(1);
    theme.enableAutoWholeImage(true);
    We still have a problem : a portion of the base map appears black most of the time, on Blackberry only (Opera Mini) ... like 1/5 of the map ... the right side ... any idea ?
    Thanks,
    JP

  • Banner image disappears when I move css to external style sheet

    If I have the following code in the head of the document, the banner image is displayed:
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="javascript/copyNote.js"></script>
    <style type="text/css">
    <!--
    #banner
    margin: 0 auto;
    width: 980px;
    height: 198px;
    background-image:url(images/banner.gif);
    -->
    </style>
    But if I move the above code to the linked external style sheet (css/styles.css) everything shows up except the banner image.
    Anyone know what I'm doing wrong?

    BcSurvivor08 wrote:
    the image path shouldn't change since the image is still in the image folder, right?
    Yes, but the path to the image in the CSS must be relative to the location of the external CSS file.
    In other words, the following rule in the home page
    #banner
    margin: 0 auto;
    width: 980px;
    height: 198px;
    background-image:url(images/banner.gif);
    would be written in the external CSS file as
    #banner
    margin: 0 auto;
    width: 980px;
    height: 198px;
    background-image:url(../images/banner.gif);
    because the CSS file is inside the css folder (one level down from the root folder).
    ../ says "From the "css" folder, go up a folder level then look for banner.gif inside the "images" folder..

  • Source Attributes in a Repository

    Hi,
    I have two different application systems in v6. In the first (AS1), I have a 'logical' model (more a Business Information model) which is essentially for peoples' information - no code will be generated from the entities/ attributes in this model.
    The second (AS2) is an existing application system which contains the physical tables. Some of the entities from the AS1 will become new tables in AS2. My problem is that I want to list the source attributes from AS1 to link to the columns in the new tables in AS2, but obviously they can't be picked up. (I can't see how to do this apart from creating the attributes in AS2, or sharing them from AS1.)
    Any suggestions?
    Thanks, Antony

    There are two type of attributes - display and navigational.
    Display - as the name implies can only be displayed in the query but cannot do selections on them  (passing a value - variable)
    Navigational - yesh sure you can select these in the query. But the only prereq being that these attribute have to be checked as navigational in the dataprovider too (not only in the IO maintenance). Once checked as navigational in both the places, you can use this as a normal char that is available in the cube, eventhough the value is read from the masterdata table

Maybe you are looking for

  • Validation Rule on Payment block

    Hi All, Need your expert advice on below scenario Specific users are allow to remove payment block of Document posted of specific vendors, can you please provide what logic I use in GGB0 Validation rule. Logic used by me is  under prerequisit: Compan

  • Desktop content viewer still doesn't scale 2048 folios?

    or does it? if I'm creating a 2048x1536 folio in inDesign and preview it on the desktop the viewer doesn't scale to fit so i can only see half the page anyone know a way around this, other than to create a 1024 doc? - Tim

  • Item Category Determination for Service Agreement

    Hi, Which Item Category can be used for the Determination of Service Agreement. Thanks & Regards,

  • Best Solution for Backup of Dual System(Mac & Win7) and Data Partition

    I need a professional solution of backup my dual-system, which are Mac OS Mavericks and Windows 7, and a Data Paritition. Right now, I have three partitions: Bootcamp (for Win 7 system, NTFS), DATA (for both system files, FAT32), Macintosh HD (for ma

  • Trouble resolving one host name

    I'm running Lion Server with two web sites hosted on it. The two domains are resolved through DynDNS.  I can see both sites both with and without the preceding www from other machines, but when I try to access one site from a browser on the Server, i