How do I create a picture at the top of my Forum (category)?

[HogwartsAcademy]

How can I create a picture or HTML text box to add an image map at the top of every forum? I really need this so if you could help me out that would be terrific.

I want something like this:



Note: I'm NOT talking about a WEBSITE Forum, I'm speaking in terms of Category forums. Like forums that are placed under categorys..

[SLGray]

Please don't use bold or color. Please keep to the default text. This is reserved for the staff for moderation.

[HogwartsAcademy]

okay so can somebody answer my question please..

[HogwartsAcademy]

Bump

[HogwartsAcademy]

Bump.. this is really urgent please.

[runawayhorses]

Sorry no one has replied to this. I don't think anyone knows how to edit the place you want the image map to be. I know how to make an image map but its the location that you want it is the problem. You want it above the topics list of every forum.

I'll be watching this topic to see if you get an answer, because I don't know how to edit that place on top of the topics list and wouldn't mind knowing.

good luck

[HogwartsAcademy]

Is there an example of what you want to be done?

I posted a screenshot taking the picture of a Categorized forum with a picture above it.

[HogwartsAcademy]

Bump..

[HogwartsAcademy]

I just need an expert at coding to tell me this isn't possible if it isn't.

[HogwartsAcademy]

No not the exact picture.. I'm merely asking how I can add my own picture above a categorized forum. For example, if they click on the "library" forum it shows a picture of a Library above it. The reason for this is because the picture would have an image map that links it to another forum and takes it to different areas of my website. So is it possible?

[runawayhorses]

It sounds like you just want a different pic for each forum, you don't need an image map for that. Just so you know an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

You create the image map using an editor that can read the coordinates on the image, then you assign a link to the coordinates. You can have as many links as the picture has coordinates, which can be thousands.

So it sounds like your question is really how can you add an image above the topics list. You need to be able to add an image above each forums topic list and add a link to it so when clicked it takes you to another page.

The real question is adding an image above each forum topics list because I assume you know how to link an image.

[Sir Chivas™]

Do you want to create an image above each Categories?

[HogwartsAcademy]

It sounds like you just want a different pic for each forum, you don't need an image map for that. Just so you know an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

You create the image map using an editor that can read the coordinates on the image, then you assign a link to the coordinates. You can have as many links as the picture has coordinates, which can be thousands.

So it sounds like your question is really how can you add an image above the topics list. You need to be able to add an image above each forums topic list and add a link to it so when clicked it takes you to another page.

The real question is adding an image above each forum topics list because I assume you know how to link an image.

I think the image map thing is confusing you a little bit. All I'm asking, in the most simple statement I can possibly type, is when you click on a forum under a category and it opens up multiple threads that have been posted and what not, I want there to be a picture above all of the threads that shows what that forum is about. For instance, if they open up the forum "Library" it shows different threads containing different sections of the Library. Above all that, there is a picture of a Library. That is what I'm asking. How can I do this? The real challenge apparently is understanding what I'm trying to ask.

[Sir Chivas™]

Hello,

Please answer my question. I'm trying to help. Are you trying to do something like this?

[HogwartsAcademy]

Do you see how it says "anime"? If you click on the forum called "anime" then that's what I want. I want there to be a picture inside the forum. What you have is a picture above the category. I want there to be a picture above the forum so when you click on the word "anime" there will be a picture of whatever you want and the list of topics and threads below.

[HogwartsAcademy]

Bump

[runawayhorses]

I think the image map thing is confusing you a little bit. The real challenge apparently is understanding what I'm trying to ask.

No image maps don't confuse me one little bit I've made several of them, but your questions do because they are not explained very well. Apparently I am not the only one that doesn't understand your question. I think its quite possible you seen a forum with a really groovy layout and you have no idea how they did it or what it is, or even how to inquire about it.

Good luck

[LostLegend]

I'll clarify your question for you.

Upon clicking on a forum or category (such as a library, arcade, etc), you want the image that displays what it is, above the topic list, in their respective forum/categories.

So if you click in a forum titled 'library' you want an image of a library to appear. If you clicked upon the 'arcade', a picture of an arcade would appear.

I'm no coding master and I don't know how to do this, but my suggestion's to try making locked subforums and putting the image for the respective forum in the locked subforum description. This is because when you create a locked subforum within a category or forum, it typically shows above the other forums in the same category.

[runawayhorses]

If that is true then my statement was correct, I said "sounds like you just want a different pic for each forum, you don't need an image map for that."

Image maps have nothing to do with what he wants to accomplish. He wants a pic in each topics list.

In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

[HogwartsAcademy]

I'll clarify your question for you.

Upon clicking on a forum or category (such as a library, arcade, etc), you want the image that displays what it is, above the topic list, in their respective forum/categories.

So if you click in a forum titled 'library' you want an image of a library to appear. If you clicked upon the 'arcade', a picture of an arcade would appear.

I'm no coding master and I don't know how to do this, but my suggestion's to try making locked subforums and putting the image for the respective forum in the locked subforum description. This is because when you create a locked subforum within a category or forum, it typically shows above the other forums in the same category.

Exactly that. I tried that suggestion, it has not worked. Thank you as well, runawayhorses, for clarifying what an image map was however.

[LostLegend]

I'll clarify your question for you.

Upon clicking on a forum or category (such as a library, arcade, etc), you want the image that displays what it is, above the topic list, in their respective forum/categories.

So if you click in a forum titled 'library' you want an image of a library to appear. If you clicked upon the 'arcade', a picture of an arcade would appear.

I'm no coding master and I don't know how to do this, but my suggestion's to try making locked subforums and putting the image for the respective forum in the locked subforum description. This is because when you create a locked subforum within a category or forum, it typically shows above the other forums in the same category.

Exactly that. I tried that suggestion, it has not worked. Thank you as well, runawayhorses, for clarifying what an image map was however.

I may look up image maps now for something I have planned! Thanks for the idea, lol.

What happens when you perform my suggestion?

[HogwartsAcademy]

I'll clarify your question for you.

Upon clicking on a forum or category (such as a library, arcade, etc), you want the image that displays what it is, above the topic list, in their respective forum/categories.

So if you click in a forum titled 'library' you want an image of a library to appear. If you clicked upon the 'arcade', a picture of an arcade would appear.

I'm no coding master and I don't know how to do this, but my suggestion's to try making locked subforums and putting the image for the respective forum in the locked subforum description. This is because when you create a locked subforum within a category or forum, it typically shows above the other forums in the same category.

Exactly that. I tried that suggestion, it has not worked. Thank you as well, runawayhorses, for clarifying what an image map was however.

I may look up image maps now for something I have planned! Thanks for the idea, lol.

What happens when you perform my suggestion?

I have tried, it has not worked.

[HogwartsAcademy]

bump

[HogwartsAcademy]

Bump..

[HogwartsAcademy]

There must be a way to do this with Javascript. HAS to be.. anybody help?

[HogwartsAcademy]

If any javascript master can help me out, that would be great

[nextlevelgaming]

hey i believe i may have what you are looking for. I need to know though where you want it? above all the forums with a hover state? or onClick , which then in turn would cause a new url to be loaded and all coding would be useless. explain to me a little please

[HogwartsAcademy]

hey i believe i may have what you are looking for. I need to know though where you want it? above all the forums with a hover state? or onClick , which then in turn would cause a new url to be loaded and all coding would be useless. explain to me a little please

What I'm looking for is particularly a picture in every respective category's forum. So if you click on a forum called, for example, "Library" a picture of a Library is appeared at the top of the forum.

For example:

[brandon_g]

I understand what the problem he wants is... he wants a banner corresponding the forum they just clicked... and it has to change every time they click a different forum... me personally i do not know how to do this. but just wanted clarify what he was asking so someone who does can help him.

But it seems like most people on this forum dont know how. I dont know if its even possible on forumotion, is that screenshot taken off a forumotion forum?

and also may i suggest having sonme pateince.... people have lives aside from this forum... if they have time to help you and know how to help you they will do it.... but bumping the thread up every 2 hours doesnt help, and its acutally annoying. Please have pateince. And I am not demaning you to do it as I am not A moderator but i am simply suggestin, people will want to help you more if you have pateince and dont bump a thread up every 2 hours.

[nextlevelgaming]

Oh gesh that's easy. So you can just want it so when they click on a category, meaning that "link" will be a dummy. basically it would be

Code:

<a href="#">

for that is the only way we can do this. OK so what you'll need to do firstly is create the script in a new javascript page.

Code:

      <script language="javascript" type="text/javascript">
//copyright 2012 NextLevel WebDesign
//<!--

function showRow(image1){
   if (document.getElementById(image1)) {
      document.getElementById(image1).style.display = '';
   }
}

function hideRow(image1){
   if (document.getElementById(image1)) {
      document.getElementById(image1).style.display = 'none';
   }
}

function toggleRow(image1){
   if (document.getElementById(image1)) {
      if (document.getElementById(image1).style.display == 'none') {
         showRow(image1)
      } else {
         hideRow(image1)
      }
   }
}


//-->
</script>
  <script type="text/javascript">
window.onload=function('hideRow';) {
toggleRow('image1');
};
</script>

the 'image1' will need to change to your fake "IDs" add this code for each image you have adn name each one differently. The script above needs to repeat 'image1' but you can name it whatever you want. just change the image1

now set that javascript to work on the homepage.

THEN go to ACP>DISPLAY>GENERAL>INDEX_BODY

find this

Code:

<!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->

replace with this

Code:

<!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               {catrow.cathead.CAT_TITLE}
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->

save it and add it

then go to each category and change the title to this

Code:

<a href="#" onClick=""toggleRow('image1');hideRow('image2');hideRow('image3');hideRow('image4');">CATEGORY NAME</a>

Do that to each category, though remember if you have 5 categories with 5 different images you need to change its respective name from image1 to a unique id for each image.

Then go to ACP>GENERAL>CONFIGURATION>SITE DESCRIPTION

and add this code

Code:

<div id="image1" style="display:none;width:500px;height:200px;background:#000;position:relative;">
</div>
<div id="image2" style="display:none;width:500px;height:200px;background:#FFF;position:absolute;">
</div>
<div id="image3" style="display:none;width:500px;height:200px;background:#C10000;position:absolute;">
</div>

Reason why i give a background color is for my testing purpose. That should work just as you wanted. if anything is need help just ask. let me know id also would like to ask for credit for this leave code as given!