Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How Do I Make Text Highlightable Where A JPG Contains The Text In CSS?

    Hello and happy new year everybody.

    A friend of mine did a website for another friend but the text which is in Chinese is not highlightable, which is what the friend recieving the website wanted and now wants me to correct. The text is being represented within a jpg.

    The website uses CSS which I am not too familiar with. I have rewritten the text from the jpg into notepad so it is ready to be copied into the script which I have tried but I do not get the desired result of just replacing the text from the jpg with real text.

    How would I go about inserting the text and using the current jpg as the background. I thought it would be quite easy or maybe I have overlooked something but I cannot get the desired result. I did see a similar problem asked on here and I tried to follow it but it seemed to be quite specific to that problem.

    Any help would be greatly appreciated!




    I only need to fix one page and from there I can make (small) adjustments to the rest of the site; the page in question is www.ilsmusic.cn/index.shtml and the jpg in question is "home_r4_c3.jpg":

    Here is the script:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>ilsmusic</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
    .style8 {font-family: verdana; font-size: 9px; color: #999999; }
    -->
    </style>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>

    <body onLoad="MM_preloadImages('home/images/splash_r4_c4_f2.jpg')">
    <table width="913" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
    <td><table border="0" cellpadding="0" cellspacing="0" width="913">
    <!-- fwtable fwsrc="background resize.png" fwbase="home.jpg" fwstyle="Dreamweaver" fwdocid = "1846891105" fwnested="1" -->
    <tr>
    <td>&nbsp;</td>
    <td><table border="0" cellpadding="0" cellspacing="0" width="913">
    <!-- fwtable fwsrc="background resize.png" fwbase="home.jpg" fwstyle="Dreamweaver" fwdocid = "1846891105" fwnested="1" -->
    <tr>
    <td colspan="3"><table border="0" cellpadding="0" cellspacing="0" width="913">
    <!-- fwtable fwsrc="splash.png" fwbase="splash.jpg" fwstyle="Dreamweaver" fwdocid = "1846891105" fwnested="1" -->
    <tr>
    <td colspan="4"><table border="0" cellpadding="0" cellspacing="0" width="913">
    <!-- fwtable fwsrc="splash.png" fwbase="splash.jpg" fwstyle="Dreamweaver" fwdocid = "1846891105" fwnested="1" -->
    <tr>
    <td colspan="2"><img name="splash_r1_c1" src="home/images/splash_r1_c1.jpg" width="729" height="87" border="0" alt=""></td>
    <td rowspan="4"><img name="splash_r1_c3" src="home/images/splash_r1_c3.jpg" width="15" height="563" border="0" alt=""></td>
    <td rowspan="3"><img name="splash_r1_c4" src="home/images/splash_r1_c4.jpg" width="169" height="504" border="0" alt=""></td>
    </tr>
    <tr>
    <td><img name="splash_r2_c1" src="home/images/splash_r2_c1.jpg" width="179" height="400" border="0" alt=""></td>
    <td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="550" height="400">
    <param name="movie" value="images/splash1.swf">
    <param name=quality value=high>
    <embed src="images/splash1.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="550" height="400"></embed>
    </object></td>
    </tr>
    <tr>
    <td colspan="2"><img name="splash_r3_c1" src="home/images/splash_r3_c1.jpg" width="729" height="17" border="0" alt=""></td>
    </tr>
    <tr>
    <td colspan="2"><img name="splash_r4_c1" src="home/images/splash_r4_c1.jpg" width="729" height="59" border="0" alt=""></td>
    <td><a href="http://www.sonicwand.com" target="_top" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('splash_r4_c4','','home/images/splash_r4_c4_f2.jpg',1);"><img name="splash_r4_c4" src="home/images/splash_r4_c4.jpg" width="169" height="59" border="0" alt=""></a></td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    </tr>
    </table></td>
    <td>&nbsp;</td>
    </tr>
    </table></td>
    </tr>
    <tr>
    <td><div align="left"><span class="style8">&copy;2006 ilsmusic - All rights reserved. ilsmusic terms &amp; conditions apply. Site created and Managed by Sonicwand Web Solutions &copy;1998-2006 . <a href="http://www.ilsmusic.cn/index.shtml">Skip Intro</a> </span></div></td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by BBoyRisk; 01-04-2007 at 08:29 PM.

  • #2
    Regular Coder Troy297's Avatar
    Join Date
    Oct 2006
    Location
    Earth
    Posts
    314
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Its actually a fairly easy solution.... I couldn't see where exactly you wanted to have the text and image background but the code would look something like this...

    Code:
    <style type="text/css">
    div {
    background: url(img.jpg);
    }
    </style>
    
    <div>
    text goes here
    </div>
    Just customize the "img.jpg" and the "div" to fit your needs!

    Note: Next time use the "[ CODE ][ /CODE ]" tags for your HTML.
    Last edited by Troy297; 01-04-2007 at 08:40 PM.
    Everyone hears what you say, friends listen to what you say, best friends listen to what you don't say.
    Radio DJ Panel v3 - It's Here!

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    This is simple:

    Code:
    CSS:
    div {
      background-image: url("image.jpeg")
      }
    
    HTML:
    <div lang="zh">
      Chinese text
    </div>
    You will, of course, have to remove the text from the background image itself, instead putting real text on top of it.

    Edit: Nevermind. scriptz revised his post to basically match mine.
    Last edited by Arbitrator; 01-04-2007 at 08:43 PM.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •