CODEWITHSUNDEEP
htmlcsstitle
gezer4000
gezer4000

Reputation: 101

Styling a 'title' attribute with CSS or possible alternatives?

I've made a small image gallery with 'Image Thumbnail Viewer 2' Link here

script allows title attribute below image that is expanded. Everything works fine but I cannot find a way to style the text in the title attribute.

All i want to do is change some basic features i.e. font-family, font-size, margin etc. nothing fancy.

<tr>
    <td>
        <a href="img/test%20images/IMG305eng.jpg" 
           rel="enlargeimage"  
           rev="targetdiv:main,trigger:click,preload:yes,fx:fade" 
           title="&lt;em&gt;Hello World&lt;/em&gt; - 2014 - 20x30x5cm">
           <img src="img/test%20images/IMG305eng.jpg">
        </a>
    </td>
</tr>

above is an example of one image thumbnail

Each image will will need a different caption underneath it. not sure if its worth using the title attribute or just doing it another way entirely.

Thanks - second post on stack-overflow so let me know if i'm doing anything wrong.

Upvotes: 0

Views: 1966

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106078

you may need to modify the js script to insert a specific tag : example: instead <br/> i added a <p> https://jsfiddle.net/x7w12etr/2/ (fixed and updated fiddle)

modified: (notice that you can add a class or id to this extra tag holding the alt attribute value of image)

 if (setting.link)
            imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
        imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<p>'+$anchor.attr('title') : '')+'</p></div>'
        return $(imghtml)
    }

From here you can target that p with css .

original:

if (setting.link)
            imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
        imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
        return $(imghtml)
    },

Upvotes: 1

hungerstar
hungerstar

Reputation: 21725

You need to target the markup (HTML) that the plugin generates as @Aziz has pointed out.

Your text (when hovering an image) is contained in an element with the ID of #loadedarea.

#loadedarea {
    font-weight: bold;
    color: red;
}

Upvotes: 1

Related Questions