Jul 25, 2008

Typing Over Image
Free Web Hosting, No Ads > CONTRIBUTE > Computers > Programming Languages > HTML, XML etc..

free web hosting

Typing Over Image

ctbrons
Apr 18 2006, 08:00 PM
Is it possible to have a linked font over an image (not being a background image)? If so, how do I accomplish that?

Reply

Kubi
Apr 18 2006, 08:04 PM
You want text on top of an image? And you don;t want the image to be the background...kinda like a button?

Well, you can make a button in photoshop and then code it.

CODE

<a href="http://thelink.com" target="_blank"><img src="http://theimage.theextension" border="0" alt="your Description"></a>

Reply

ctbrons
Apr 18 2006, 08:41 PM
I have thought about that, but I would prefer not to use a button. I would just like to be able to create a link on top of an image. Case-in-point what you see at the bottom of this page: http://www.faithcity.org/contact.html

Reply

serverph
Apr 18 2006, 08:56 PM
QUOTE(ctbrons @ Apr 19 2006, 04:41 AM) *

I have thought about that, but I would prefer not to use a button. I would just like to be able to create a link on top of an image. Case-in-point what you see at the bottom of this page: http://www.faithcity.org/contact.html


on the contrary, that example you gave just uses one big background image, with text aligned to occupy the desired positioning. if you want it that way, you might want to view the source code of the page, and see how it was done. then just tweak it according to your needs. smile.gif (although you want it NOT as a background which renders your example moot and irrelevant already).

 

 

 


Reply

garbage
Apr 18 2006, 09:17 PM
ight man i think i have exactly what you need i helped write this script a while back and the only thing i did different for you is the part in orange

everything in red can be changed to your liking as far as colors
also font can be changed as well

and make sure you change the image link in green

QUOTE
<div align="center"><table border="0" cellpadding="0" cellspacing="0" width="425" height="175" background="http://img149.imageshack.us/img149/3522/garbagegrouch4yr.jpg"><td width="425" height="175" colspan="1"><td width="1" height="175"><td width="400" height="50"><div style="width: 425; height: 175; overflow: auto; font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#538BB1; scrollbar-face-color:#275A7D; scrollbar-highlight-color:#538BB1; scrollbar-1dlight-color:#275A7D; scrollbar-darkshadow-color:#0A253B; scrollbar-shadow-color:#275A7D;"><div style="padding: 0px;">

<a href="http://img136.imageshack.us/img136/918/brushlessbgtutbygarbage2nr.jpg" target="blank">Brushless Background</a> if you want text without link just type text only

<br></div></div></td><td width="1" height="127"></td></tr><tr><td width="400" height="0" colspan="1"></td></tr></table></div>




hope this helps


Reply

WindAndWater
Apr 19 2006, 12:10 AM
I can't honestly see why you wouldn't use a background image (for a div or a table cell) but if you feel the great need to do it another way, you can use the z-index variable in css which allows for the layering of multiple elements.

Reply

Tyssen
Apr 19 2006, 03:01 AM
QUOTE(WindAndWater @ Apr 19 2006, 10:10 AM) *

I can't honestly see why you wouldn't use a background image (for a div or a table cell) but if you feel the great need to do it another way, you can use the z-index variable in css which allows for the layering of multiple elements.

Like WaW says, using an image in the HTML and then using z-index to position text over it would be a dumb way of doing it but if you absolutely had to (although I'd like to hear a good reason why), then you'd also need to use positioning (absolute/relative) to get the two elements to occupy the same space.

Reply

andrew1123
Jul 14 2006, 07:35 AM
this is what you need to do: biggrin.gif
QUOTE
<img src="source" style="vertical-align: middle" />
<span style="position: relative; left: -width_of_the_image">
text
</span>

the parts in red are parts that you edit depending on your preferences smile.gif
you can make text a link as you wanted

the only problem is that text doesn't center itself within the image. i cant figure out how to do that (unless you manually get it to the center by moving it pixel by pixel). sad.gif

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Similar Topics

Keywords : typing, image

  1. Help With Background Image
    please? :) (6)
  2. Background Image Picture On A Website
    how do u make a pic a backround?? (3)
    ?email me if u know! Trap17 forum asks you to post contributes with substance. ....
  3. Image Links
    (5)
    Ok...another question...may sound stupid, but we're all stupid...how'd I be able to create
    an image link. Uh...let me rephrase this: If I were to create an "Enter" image and wanted people to
    click the image to enter to a certain page, how would I do it without some sort of the famous "Blue
    Line" around it? Any help would be greatly appreciated... /unsure.gif"
    style="vertical-align:middle" emoid=":unsure:" border="0" alt="unsure.gif" />....
  4. Need Help With Image Wrapping
    (13)
    ok my problem now is that i need it to auto width the image that needs to be use so then I can use
    tags for the content without the need for the image to expand from left to right. heres the css for
    the image wrap CODE <style type="text/css"> span {     background-image:
    url(images/gfxtrap_42.gif);     background-repeat: repeat-y;
        background-position: top left, bottom right;     height: 200px;     border: 0px; }
    </style> heres the rest of the website code. CODE <!DOCTYPE html PUBLIC
    "....
  5. Image Roll Over Drop Down Menu Help
    (2)
    Ok I been searching for days now on a half way descent tutorial on how to do a Image Roll Over Drop
    Down Menu in CSS without the use of javascript, I been seeing alot of the suckerfish set up but of
    course no one goes in to detail on how to set up the image rollover version of it. Plus I don't
    want the dhtml or the javascript setup just good ole pure css. Also I need ot be able to control
    multiple menus in one script as well. CODE <!DOCTYPE html PUBLIC "-//W3C//DTD
    XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict....
  6. Getting An Image To Scroll On With Content
    (13)
    ok, well i had had people review Hogwartsmagic.net and they said that i should get it to not be one
    huge image as a layout..and i have figured most of it out and it has proven sucessful! but now i
    am having diffuclty, i am pretty much only a basicl HTML kinda person... and i was wondering if
    anyone knows an html code that will allow one image to scroll the entire length of a pages content?
    for example, if i were to add 200 links to the right navigation..the image would go with the
    content.. i am testing it out here HERE any help would be much appreciated....
  7. Ie5 Mac Does Not See My Site
    It shows the body bg image only... (11)
    Remember that site layout I was hacking down for IE? Which by the way I didnt really like, but it
    was the customer's design... and yes, he is not a graphic designer hehe... Anyway I was really
    surprised that I got to the solution and fixed it... but as I'm testing between browsers, I come
    to see that Internet Explorer in Mac does not show nothing of my page, yet the source code is there,
    if you click command + e in order to see the html source code, its all there! But all I can see
    from the page itself is the body background-image... I tried removing the d....
  8. Usemap And Table Background Image Changing
    (5)
    I have a menu page that consists of links to other pages. The page has a background image of a
    globe. The globe is divided into seperate sections for each menu item. As a user hovers over each
    section I change the background image(The same globe with that section highlighted.) That is what I
    have so far except that they have to hover over a small anchor tag that I put in not the whole
    section. I want to change it so that they can actually hover over all of the section they are
    selecting. I found usemap online but haven't found any examples where it will actually ch....
  9. Image Doesn't Load
    (6)
    Hi, Never hapened to me since HTML was invented. I've got a webpage ( h.shtml - I've also
    tryed .htm, .html ) with the following code: Code: CODE <html> <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta
    name="ProgId" content="FrontPage.Editor.Document"> <meta
    http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Horoscope</title> </head> <body> <div
    align="center">  <cente....
  10. Fixed Background Image
    Just little reminder (10)
    Easy teahnic, post the following codes between and QUOTE <!--
    body{background-image: url( under.gif ); background-repeat:no-repeat; background-attachment :
    fixed; background-position: 10% 20% ;} --> For red colour, change it to your
    image's location. For green colour, it is used to set horizontal and vertical position of
    background image. I hope it can help you. /tongue.gif' border='0' style='vertical-align:middle'
    alt='tongue.gif' /> ....
  11. Image.index.html
    (10)
    hello there well i designed this image that includes text a logo i shall say i am aware that i need
    to title it index.html when i upload the file i visit my website and it shows the file folder. now i
    only want that image i designed on there so when clients visit my site it only goes to that page the
    rest of my site isent done yet. i want it to be just like the sites you visit and it states
    underconstruction. programs ive tried: indesign, image ready, incopy cs2, dreamweaver. and i
    still dont understand please help meeh thanks oh and what classify's images html,....
  12. Substitute Form Button For An Image
    homemade images in forms buttons (3)
    Hi, I have the next formular : CODE  <form method='post'
    action='index.php?mode=2&id=1'>                <input type='hidden'
    name='name' value='Canon Digital Ixus 700'/>                <input
    type='hidden' name='id' value='1'/>                <input
    type='hidden' name='qty' value='1'>                <input
    type='hidden' name='cost' value='40'>                <input
    type='submit' value='Add to ca....
  13. Simple Smil Question About Image Positioning
    (3)
    Howdy all, I'm working on a project for college but ran into a "little" problem with SMIL,
    concerning positioning images. You can see the smil presentation here:
    http://www.ket.trap17.com/smil-show/index.html (its only a 15 second presentation and doesn't
    take long to load. don't mind the language on the left image, its portuguese) What i want to
    do, is to make the image on the right, to fade in in the same place as the left image. I tried
    setting a region but that didn't work, I tried using the layout tags in the but that also
    didn't work (o....


      14. Looking for typing, image

Searching Video's for typing, image
advertisement



Typing Over Image



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!" 		Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE