PDA

View Full Version : Need A Code to enables you to write over an image



seattle-west
03-14-2007, 10:05 AM
anyone know a code that enables you to write over a image because right now i had to use my header and nav as a backround (because there pictures) is there anyway i can write text over a picture? thanks alot

heres my website for reference, (the only reason the letters are on the nav bar is because i set it as a backround) someone please help

www.seattlewest.net

Twey
03-14-2007, 10:16 AM
the only reason the letters are on the nav bar is because i set it as a backroundThat's the best way to do it. You need to position them better, though.

seattle-west
03-14-2007, 10:26 AM
well setting it as a backround causes alot of problems. because it makes it harder to put other stuff on the page. But is there any code though that does this so i can just have a nav image and write text over it...


well i used gimp to make the header and navigation bar idk well is there a way to make the image into sections so its editable cause i notice if you download website templates you can edit the navigation bars and type anything in them, i wonder if thats possible?. thanks

Twey
03-14-2007, 10:55 AM
The problem is that the navigation bar and header are all one big image. Instead, try having the header as one image, and then have several elements (<li> is most correct here) underneath, each with one of those little boxes as a background and text in the foreground.

chechu
03-14-2007, 12:50 PM
The problem is that the navigation bar and header are all one big image
Why not write the headers in the big image (Photoshop or whatever), and then make the links by mapping.
More here: http://www.dynamicdrive.com/forums/showthread.php?t=17898

V1SHAL
03-14-2007, 04:35 PM
Why not write the headers in the big image (Photoshop or whatever), and then make the links by mapping.
More here: http://www.dynamicdrive.com/forums/showthread.php?t=17898


or...

write the links with an image editor and make each "box" a seperate image. And just link the entire image as if it were a button.

Twey
03-14-2007, 05:15 PM
Why not write the headers in the big image (Photoshop or whatever), and then make the links by mapping.Because that's using images as text, which is a bad idea. The same applies to V1SHAL's suggestion.

chechu
03-15-2007, 01:39 PM
Because that's using images as text, which is a bad idea
Why is this a bad idea ?

Twey
03-15-2007, 06:58 PM
Firstly, images take something on the order of several hundred times the bandwidth to send as their text equivalents. Secondly, there are browsers that cannot display images, although this can be fixed by using an appropriate alt. Thirdly, images can't be resized, take no account of the user's default font settings, and look very different at different display resolutions, having the same problems as pixel-sized text. The only way around this is to use SVG images with a relative size, but IE doesn't support SVG images yet.

mdcloud
03-15-2007, 11:59 PM
you can also try layers. i have used them on occation


<script language="JavaScript" type="text/JavaScript">
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>
<div id="Layer1" style="position:absolute; width:1200px; height:800px; z-index:1; visibility: visible; left: 0px; top: 0px;">
<img class="header1" src="pics/header1.jpg" width="1083" height="224" border="0">

</div>
<div id="Layer2" style="position:absolute; width:800px; height:800px; z-index:2; visibility: visible;">
<br><br>
text

</div>

Twey
03-16-2007, 10:55 AM
<script language="JavaScript" type="text/JavaScript">The language attribute is deprecated.
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);Urgh, DreamWeaver junk, using browser detection.
<div id="Layer1" style="position:absolute; width:1200px; height:800px; z-index:1; visibility: visible; left: 0px; top: 0px;"> Will only work if everything page is absolutely-positioned using pixels, a very bad idea.
<img class="header1" src="pics/header1.jpg" width="1083" height="224" border="0">The width, height and border attributes are all deprecated for CSS.
<br><br>
textThat's an abuse of <br>.

joao.rolo.sa
08-29-2007, 04:25 PM
Hi im kinda new at web programming, but highly experienced on other languages.

Heres something that worked for me without using some Heavy Javascript Code.

First ive defined these two styles :

.FontDarkGreen2{
FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #4F7242;
top: 30px;
left: 12px;
position: absolute;
z-index:2;
visibility:visible;

}

.ImageLayer
{
/*top: 280px;
left: 350px;*/
position: relative;
width:320px;
height:360px;
z-index:1;
visibility:visible;
}

Then you only need to use an html like this:

<div id ="firstDiv" class="ImageLayer">
<img name="".......>
<div id="MyDivMapa" runat="server" class="FontDarkGreen2" />
</div>

Then i used vb to generate dynamically the .innerHtml conten of MyDivMapa thats All ; )

NOTE: The Text Element with Class = FontDarkGreen2 MUST BE NESTED INSIDE element with Class = ImageLayer.
Trick an Absolute POsition inside a father element with relative positioning,
is limited to its anchestor positining limits

Hope this has been usefull.

Cheers