Home/ Questions/Q 82885
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T21:41:13+00:00

The code I have pasted below is meant to display images on the middle

  • 0

The code I have pasted below is meant to display images on the middle 2 links without text and go back to text on the reset and fourth link. I have set display:none for the span tag only, but it does nothing. Is there anyway to do what I am after simply, without using a framework?

edit: example

<html>     <head>         <style type='text/css'>                 .class1{color:#000; background-image:url('1.jpg');}         .class1 span { display: none;}                 .class2{color:#00f; background-image:url('2.jpg');}         .class2 span { display: none;}                 .class3{color:#0f0; background-image:url('1.jpg');}         .class3 span { display: none;}                 .class4{color:#f00;}          </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;'>try here</a><br/>                 <a href='#' onclick='sbox('div1','class3'); return false;'>or here</a><br/>                 <a href='#' onclick='sbox('div1','class4');return false;'>or maybe here</a>         </div>         <div id='div1' class='class4'><span id='div1_text'>Blah blah blah</span></div>     </body> </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. The rel attribute is supposed to describe the relationship of the link to the current document. It should have one of the values described here. A DIV is a block-level grouping element, whereas a SPAN is an inline grouping element. SPANs allow you to group text and tags together for some purpose (common styles, etc.) without changing the flow of the markup.

    EDIT: The question changed out from under me so the above seems really disconnected from the current context.

    You need to do as @llandril says and give the DIV some size. I would suggest giving the DIV fixed width and height — either always or when one of the classes that displays an image is used. Use the width and height of your background image if you want the whole thing displayed. You may also need to give it some content as well, but I don’t think so.

    Here is what class1 would look like, I think. I haven’t tested this.

        /* in case color needs to apply to other elements */     .class1 { color: #000; }      div .class1 {         background-image:url('1.jpg');         width: 60px;         height: 30px;     }      div .class1 span { display: none;}
    • 0