图像和文本查询

我有一个非常简单的HTML页面在这里：图像和文本查询

http://www.nomorepasting.com/getpaste.php?pasteid=22407

而且我在页面上4层。原因是它是一个更复杂的网站框架，我简化了它来问我的问题。基本上，我希望能够点击不同链接的2层并在层1改变形象，但我已经找到了办法做到这一点：

<script type="text/javascript"><!-- 

function sbox(boxName,xname) { 

    theBox = document.getElementById(boxName); 

theBox.className = xname; 



} 

//--> 

</script>

结果在文本n要走开，我需要，以及一种方法来点击并替换文本中的任何图像。我找到了替代的JavaScript代码，但无法将其应用到我的HTML页面。

<script type="text/javascript"> 
function toggleImg(myid) { 
    objtxt = document.getElementById(myid); 
    objimg = document.getElementById(myid+'_img'); 

    if(objtxt.style.display == 'block') { // Show image, hide text 
    objtxt.style.display = 'none'; 
    objimg.style.display = 'block'; 
    } else { // Hide image, show text 
    objimg.style.display = 'none'; 
    objtxt.style.display = 'block'; 
    } 

} 
</script>

什么是最简单的方法来做到这一点，而不改变我的网页设计？注意：我不想使用框架，我想了解这是如何完成的，并为我自己做。

我的另一个问题是，如果图层应该替换表：当css可以用来代替时使用表总是不好的？使用图层很容易使行和列等效于格式化文本数据，而不是网站的结构？

来源

2008-12-02 Joshxtothe4

双间距在问题上很糟糕，我们可能真的在这里没有它。 – TravisO 2008-12-02 14:29:39

考虑将代码作为示例页面发布到其他地方的链接以及相关代码片段。你可能会得到更多的人愿意看看。 – biozinc 2008-12-02 14:29:52

（针对Joshxtothe4的评论......我需要更多的空间来应对）

改变类回的Class1不会再显示文本，很遗憾。我给出的代码将隐藏文本，总是，如果它在一个跨度中找到。你可以做下面的事情，并添加另一个CSS语句，如果使用class4，将隐藏该跨度。然后，您不必在JavaScript中拥有该代码。可能是一个更清洁的解决方案：

<html> 
    <head> 
     <style type="text/css"> 
       .class1{color:#000;} 
       .class2{color:#00f;} 
       .class3{color:#0f0;} 
       .class4{color:#f00; background-image:url('someimage.jpg');} 
     .class4 span { display: none;} 
     </style> 
    </head> 
    <body> 
     <script type="text/javascript"> 
       function sbox(divid, classname) 
       { 
         document.getElementById(divid).className=classname; 
       } 
     </script> 
     <div> 
     <a href="#" onclick="sbox('div1','class1');return false;">Reset</a><br/> 
       <a href="#" onclick="sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/> 
       <a href="#" onclick="sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/> 
       <a href="#" onclick="sbox('div1','class4');return false;">Test Div1, Class4(red)</a> 
     </div> 
     <div id="div1" class="class1"><span id="div1_text">Blah blah blah</span></div> 
    </body> 
</html>

只要有图像作为背景，这可能是你最好的选择。唯一的问题是设置背景图像不会隐藏前景文本。你总是必须以某种方式隐藏文字

来源

2008-12-02 15:28:44 Carl

表格用于表格数据（请考虑Excel）。如果您有要显示的数据网格，请使用表格。当谈到页面细节时，请使用CSS定位。

另外，迷恋DIV的使用并不是使用CSS的最佳方式。养成在DIV中包装所有东西的习惯是一种被称为“div疯狂”的做法，你可以通过谷歌找到它不好的原因。

来源

2008-12-02 14:30:39 TravisO

div div mania是什么意思？有一个主要的div能够容纳所有东西没有用吗？ – 2008-12-02 14:35:58

首先，当设置背景图像时，无论您设置Z-Index的高度如何，它都不会隐藏DIV中的文本。它只是不起作用。一种解决方案可能是将内部文本封装在一个范围内，并在想要显示div的背景图像时隐藏范围。但是，从你的问题来看，你不想过多地改变你的html结构，但是，我相信你必须得到你想要的。

示例代码：

<html> 
    <head> 
     <style type="text/css"> 
      .class1{color:#000;} 
      .class2{color:#00f;} 
      .class3{color:#0f0;} 
      .class4{color:#f00; background-image:url('someimage.jpg');} 
     </style> 
    </head> 
    <body> 
     <script type="text/javascript"> 
      function sbox(divid, classname) 
      { 
       document.getElementById(divid).className=classname; 
       if(document.getElementById(divid+"_text")!=null) 
        document.getElementById(divid+"_text").style.display="none"; 
      } 
     </script> 
     <div> 
      <a href="#" onclick="sbox('div1','class2');return false;">Test Div1, Class2(blue)</a><br/> 
      <a href="#" onclick="sbox('div1','class3'); return false;">Test Div1, Class3(green)</a><br/> 
      <a href="#" onclick="sbox('div1','class4');return false;">Test Div1, Class4(red)</a> 
     </div> 
     <div id="div1" class="class1"><span id="div1_text">Blah blah blah</span></div> 
    </body> 
</html>

和我一起TravisO同意，HTML表应该用于表格数据，而不是作为一种布局机制。当你有很多表/行/等等的层次结构时，也有一些CSS的怪异之处。

来源

2008-12-02 14:42:21 Carl

感谢您的回复。我是否只需将课程改回1以获取文本，并依然依赖其他课程的背景图片来显示它们？如果我的理解不正确，我很抱歉。什么是更好的方式，而不是将图像作为背景？ – 2008-12-02 15:08:29

图像和文本查询

回答

相关问题