This content has been marked as final. Show 3 replies
tparvaiz wrote:<tt>figcaption</tt> is HTML, not CSS. And in your case:
I am trying to put some text on an image using css functionality figcaption
it is very, very invalid HTML.
<ul class="uFigures"> <img src="#WORKSPACE_IMAGES#PICUTRE_1.png" border="0" alt=""> <figcaption>Headding: </figcaption> <figcaption_TEXT>&P9_TEST.</figcaption_TEXT> </ul>
An unordered list (<tt>ul</tt>) must contain at least one list element (<tt>li</tt>). An <tt>img</tt> cannot be a child of a <tt>ul</tt>. <tt>figcaption</tt> must be the first or last child of a <tt>figure</tt> element.
What is <tt>figcaption_TEXT</tt>? It is not an HTML element.
We've Re: mouse rollover - chainging image.
I can put the 1st one with no issues but when I am trying to put a second text on to the image, it's behaving strangely (it's putting text to the bottom right side of it)You appear to be trying to persist in using a single image against Re: is there a way to add text to the image automatically. I have recreated the HTML5+CSS example app from that thread in your workspace so you can study it better. The correct HTML mark-up for 2 images with data overlays is in the Score Board region:
<ul class="uFigures"> <li> <figure title="Scotland"> <img src="#APP_IMAGES#gb-sct.png" alt="Scotland"> <figcaption>&P1_SCT.</figcaption> </figure> </li> <li> <figure title="England"> <img src="#APP_IMAGES#gb-eng.png" alt="England"> <figcaption>&P1_ENG.</figcaption> </figure> </li> </ul>
Plus, when I put a reference to the item (&P9_TEST.) it doesn't display at all.That's very simple: <tt>P9_TEST</tt> doesn't have a value in session state when the <tt>&P9_TEST.</tt> reference in the FigCaption region is rendered. Page item values set using item Source or Default properties don't enter session state until the page is submitted. If you want the value to be available during page show it must be set using a computation or process that is evaluated before the item is rendered or referenced.
thanks for your detailed reply and suggestions... I really appreciate it
So here is the scenario explaining the rationale behind my approach. I have an image file that shows a process (something similar to a retail operation that has few arrows going into a shop to identify customers and products, and some arrows coming out of the shop identifying order dispatches and deliveries)... very basic stuff
process diagram is pretty much the same for all the cities but the volumes get changed... depending on the selected city (from another linked report) I want to show volumes under each arrow (e.g. number of customers to appear below the customer arrow, and similarly for dispatches and deliveries I want to show associated numbers under each arrow)
I tried your suggestion to use figcaption, which worked fine for me even when I used multiple texts. one of the things I still need to do is test it under different browsers. With Chrome and IE I don't see any issues as I tried with both of them.
One of the challenge that I was facing with <li> is the size of the image... looked into your template but can't figure it out how to change it... I think you may change the image size by specifying dimensions (width/height) through the <img src> tag but I am not sure if it is the best practice or not. please advice
Thanks again for your assistance